typeahead.js 使用记录

发表于2015-07-13 14:30:23| --次阅读| 来源webkfa| 作者html,css

摘要：twitter typeahead.js使用记录

github地址：https://github.com/twitter/typeahead.js

在aceAdmin界面模板中，有typeahead这一控件，版本号为0.10.2 , 这个版本对 minLength:0这个参数无效，所以我就到github中找到新版本0.11.1 替换，在此记录使用过程中的一些注意事项

基本代码

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)
            });

注意：在github的example上，没有displayKey 这行， matches.push里面的代码是 (str) 而不是({Value:str}) ,这样的结果就是在匹配的列表中只显示 undefined 。

minLength这个参数为0时，点击输入框则自动出列表，比较适合选项不多的情况。

配合aceAdmin使用时，会出现列表没有边框等显示效果异常，原因是版本升级后样式表不对，我采用修改ace.css来解决：

1 将 tt-dropdown-menu改为 tt-menu

2 增加一段css

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

最后，还要提一下版本问题，这个控件经过多次升级，最后从bootstrap里面独立出来了，所以在3.0以上版本中看不到这一控件。在网上大量的资料是基于早期版本的，与现有版本差异较大。

typeahead.js 使用记录

发表于2015-07-13 14:30:23| --次阅读| 来源webkfa| 作者html,css

相关文章

最新发布

阅读排行

热门文章

猜你喜欢