typeahead.js usage record_html/css_WEB-ITnose

github address: https://github.com/twitter/typeahead.js

In the aceAdmin interface template, there is the typeahead control, the version number is 0.10.2, this version is suitable for The parameter minLength:0 is invalid, so I went to github to find the new version 0.11.1 to replace it. Here I record some precautions during use

Basic code

 var gameNameList = ['abc', 'abd', 'cde', 'xyz'];            var gameNameMatcher = function(strs) {                return function findMatches(q, cb) {                    var matches, substrRegex;                    // an array that will be populated with substring matches                    matches = [];                    // regex used to determine if a string contains the substring `q`                    substrRegex = new RegExp(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: In the github example, there is no displayKey line. The code in matches.push is (str) instead of ({Value:str}). The result is that only undefined is displayed in the matching list.

When the minLength parameter is 0, clicking the input box will automatically pop up the list, which is more suitable for situations where there are not many options.

When used with aceAdmin, there will be abnormal display effects such as the list having no borders. The reason is that the style sheet is incorrect after the version upgrade. I solved it by modifying ace.css:

1 Will tt-dropdown -menu is changed to tt-menu

2 Add a piece of css

.tt-suggestion:hover {  cursor: pointer;  color: #fff;  background-color: #0097cf;}

Finally, I also want to mention the version issue. This control has been upgraded many times and finally changed from Bootstrap is independent, so this control cannot be seen in versions 3.0 or above. A large amount of information on the Internet is based on earlier versions and is significantly different from the current version.