Typeahead.js Usage Records

Source: Internet
Author: User

GitHub Address: Https://github.com/twitter/typeahead.js

In the Aceadmin interface template, there is typeahead this control, the version number is 0.10.2, this version of the minlength:0 this parameter is not valid, so I went to GitHub to find a new version of 0.11.1 replacement, in this record the use of some considerations in the process

Basic code

 vargamenamelist = [' abc ', ' Abd ', ' cde ', ' XYZ ']; varGamenamematcher =function(STRs) {return functionfindmatches (q, CB) {varmatches, Substrregex; //An array that'll be populated with substring matchesMatches = []; //regex used to determine if a string contains the substring ' q 'Substrregex =NewREGEXP (q, ' I '); //iterate through the pool of strings and for any string that                    //contains the substring ' q ', add it to the ' matches ' array$.each (STRs,function(i, str) {if(Substrregex.test (str)) {Matches.push ({value:str});                    }                    });                CB (matches);            };            }; $(' #Name '). Typeahead ({hint:true, highlight:true, MinLength:0}, {name:' Gamenamelist ', Displaykey:' Value ', Source:gamenamematcher (Gamenamelist)});

Note: On GitHub example, there is no displaykey this line, the code inside the Matches.push is (str) instead ({value:str}), so the result is only undefined in the matching list.

MinLength This parameter is 0 o'clock, click on the input box to automatically out the list, more suitable for the case of a few options.

When used with Aceadmin, there will be a list without Borders and other display effect is abnormal, because the version upgrade style sheet is not correct, I used to modify the ACE.CSS to solve:

1 Change Tt-dropdown-menu to Tt-menu

2 adding a section of CSS

{  cursor: pointer;   color: #fff;   background-color: #0097cf;}

Finally, to mention the version of the problem, the control has been upgraded several times, and finally from the bootstrap inside the independent, so in more than 3.0 versions do not see this control. The large amount of information on the Web is based on earlier versions, which differ greatly from the existing version.

Typeahead.js Usage Records

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.