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 使用记录的更多相关文章

  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. 使用Visual Studio调试用户模式进程(Debugging a User-Mode Process Using Visual Studio)

    由于本人能力有限,翻译不足之处敬请谅解,欢迎批评指正:sunylat@163.com Visual Studio版本:Visual Studio 2015企业版,中文环境. MSDN原文:https: ...

  2. Java基础语法目录

    一.Java相关科普知识1.Java的发展历程2.Java的发展方向3.Java的体系特性二.Java第一个程序1.JavaJDK的安装与环境的配置2.记事本开发Java程序的注意事项与常见问题3.J ...

  3. XUtils 3 使用

    源代码:https://github.com/wyouflf/xUtils 基本使用:http://blog.csdn.net/abc6368765/article/details/50699334 ...

  4. DEDE后台登录和前台验证码不显示的解决方法

    DEDE后台登录和前台验证码不显示的解决方法,网络上现在有好几种方法,某些时候还是有用的.说说自己今天遇到的一个情况,跟其他不一样的原因和解决方法:  方法一 1.用ftp把网站根目录下的DATA文件 ...

  5. Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  6. 基于Grunt&Mocha 搭建Nodejs自动化单元测试框架(含代码覆盖率统计)

    Introduction Grunt 是一个基于任务的JavaScript 世界的构建工具 Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异 ...

  7. 第二周:If判断语句程序当中的作用简介

    1.If语句的作用: 在我们编写程序时经常会遇到内容判断的问题,比如判断内容的真假或者值的大小分别输出内容的问题 这时就会用到我们的If判断语句了,顾名思义,if在英文单词中意思为如果,在Java中他 ...

  8. ios录音、音频播放功能

    #import <AVFoundation/AVFoundation.h> { NSInteger   _timeCount;    NSTimer     *_timer; } @pro ...

  9. MyEclipse怎么设置个性化代码注释模板

    打开Eclipse/MyEclipse工具,打开或创建一个Java工程,点击菜单Window->Preferences弹出首选项设置窗口   展开左侧Java->Code Style-&g ...

  10. PS1应用之——修改linux终端命令行各字体颜色

    最近在学习linux操作系统(CentOS 6 & CentOS 7).觉得linux终端命令行全部为白色,会经常导致命令与输出内容难以分辨.于是上网找到修改linux终端命令行颜色的方法,发 ...