Typeahead. js usage record and typeahead. js record

Typeahead. js usage record and typeahead. js record

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

In the aceAdmin Interface Template, there is a typeahead control. The version number is 0.10.2, which is invalid for the minLength: 0 parameter. So I will find the new version 0.11.1 in github to replace it, notes for use in this record

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: On github example, there is no displayKey line, matches. the code in push is (str) rather than ({Value: str}). The result is that only undefined is displayed in the matching list.

When the value of minLength is 0, the list is automatically displayed when you click the input box. This is suitable for scenarios where there are not many options.

When using aceadmin, the system displays abnormal results without borders. The reason is that the sample table after upgrade is not correct. I will modify ace.css to solve the problem:

1. Change tt-dropdown-menu to tt-menu.

2. Add a css

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

Finally, we need to mention the version issue. This control has been upgraded several times and is finally independent from bootstrap. Therefore, this control cannot be seen in Versions later than 3.0. A large amount of information on the Internet is based on earlier versions, which is significantly different from existing versions.