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

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

基本代码

  1. var gameNameList = ['abc', 'abd', 'cde', 'xyz'];
  2. var gameNameMatcher = function(strs) {
  3. return function findMatches(q, cb) {
  4. var matches, substrRegex;
  5.  
  6. // an array that will be populated with substring matches
  7. matches = [];
  8.  
  9. // regex used to determine if a string contains the substring `q`
  10. substrRegex = new RegExp(q, 'i');
  11.  
  12. // iterate through the pool of strings and for any string that
  13. // contains the substring `q`, add it to the `matches` array
  14. $.each(strs, function(i, str) {
  15. if (substrRegex.test(str)) {
  16. matches.push({value:str});
  17. }
  18. });
  19.  
  20. cb(matches);
  21. };
  22. };
  23. $('#Name').typeahead({
  24. hint: true,
  25. highlight: true,
  26. minLength: 0
  27. }, {
  28. name: 'gameNameList',
  29. displayKey: 'value',
  30. source: gameNameMatcher(gameNameList)
  31. });

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

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

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

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

2 增加一段css

  1. .tt-suggestion:hover {
  2. cursor: pointer;
  3. color: #fff;
  4. background-color: #0097cf;
  5. }

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

typeahead.js 使用记录的更多相关文章

  1. js 键盘记录实现(兼容FireFox和IE)(转)

    主要分四个部分 第一部分:浏览器的按键事件 第二部分:兼容浏览器 第三部分:代码实现和优化 第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydo ...

  2. 【微收藏】来自Twitter的自动文字补齐jQuery插件 - Typeahead.js

    没图没逼格 事发有因 该插件可以结合本地数据进行一些操作.推荐关注一下H5的几种数据存储的方式(localstorage与sessionstorage.IndexedDB.离线缓存manifest文件 ...

  3. 我的three.js学习记录(二)

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  4. 我的three.js学习记录(三)

    此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...

  5. jquery input 搜索自动补全、typeahead.js

    最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...

  6. 在ASP.NET MVC中使用typeahead.js支持预先输入,即智能提示

    使用typeahead.js可以实现预先输入,即智能提示,本篇在ASP.NET MVC下实现.实现效果如下: 首先是有关城市的模型. public class City { public int Id ...

  7. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  8. D3.js学习记录【转】【新】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 我的three.js学习记录(一)

    在之前因为项目需要使用WebGL技术做网页应用,但是苦于自己没有接触,只是使用过OpenGL.然后接触到了thre.js这个第三方库之后我突然心情很愉快,这将节省我很多时间. 过了这个项目之后,就再也 ...

随机推荐

  1. c#操作Excel

    Excel是微软公司办公自动化套件中的一个软件,他主要是用来处理电子表格.Excel以其功能强大,界面友好等受到了许多用户的欢迎.在设计应用系统时,对于不同的用户,他们对于打印的需求是不一样的,如果要 ...

  2. MVC4 +EasyUI Tabs 使用

    Tabs 右键菜单功能实现 前端 <div id="tabs" class="easyui-tabs" fit="true" bord ...

  3. 有关TabBar的一些性质

    // 计入导航控制器时,要使得底部的TabBar消消失 test.hidesBottomBarWhenPushed = YES; /** *  布局子控件 */ - (void)layoutSubvi ...

  4. flddler使用方法

    http://blog.csdn.net/geekgjie/article/details/8029936

  5. Scale和Resolution的含义及转换算法

    当我们在用arcgis server 构建切片时,我们会发现在缓存生成的conf.xml中有这样的片段: 在上述片段中<LODInfo>代表了每一级切片的信息,<LevelID> ...

  6. 【摘】crontab 各时间含义

    HELL=/bin/bash <==使用哪種 shell 介面 PATH=/sbin:/bin:/usr/sbin:/usr/bin <==執行檔搜尋路徑 MAILTO=root < ...

  7. Netty是什么?

    Netty是什么? 本质:JBoss做的一个Jar包 目的:快速开发高性能.高可靠性的网络服务器和客户端程序 优点:提供异步的.事件驱动的网络应用程序框架和工具 通俗的说:一个好使的处理Socket的 ...

  8. js复选框操作

    $(".checkall").click(function () {                if (this.checked) {                    $ ...

  9. mapreduce核心原理

    1:第一阶段: 第一阶段的task每一个nodemanager并发运行程序,完全并发,各不影响.这就是map阶段 运行的task时maptask 2:第二个阶段的task并发实例互不相干,但是他们的数 ...

  10. Semaphore用法

    HANDLE hSemaphore; cout<<1<<endl; hSemaphore = CreateSemaphore( NULL, 0, 10000, NULL);   ...