视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
typeahead.js使用记录_html/css
2020-11-27 16:08:32 责编:小采
文档


github地址:https://github.com//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以上版本中看不到这一控件。在网上大量的资料是基于早期版本的,与现有版本差异较大。

下载本文
显示全文
专题