上图效果可以使用jQuery插件Typeahead.js来实现,这款jQuery插件来自于Twitter的一个新的项目,支持远程和本地的数据集。比较有特色的地方在于你可以将数据集使用本地存储(local storage)来保存在本地,有效的提高用户体验。同时也拥有很多远程数据集的处理选项,例如(请求频率,最大的并发请求数,等等)。
主要特性
支持数据本地保存,客户端加载,优化加载速度
支持多语言,并且支持阿拉伯文
支持Hogan.js模板引擎整合
支持多数据集拼装
支持本地和远程的数据集
项目地址
http://twitter.github.io/typeahead.js
如何使用
首先在网页 head 中引入 jQuery 框架和 Typeahead.js 插件的相关 JS 和 CSS 文件
<script src= "jquery-1.9.1.min.js" ></script>
<script src= "typeahead.min.js" ></script>
然后添加要想实现动画的 HTML 元素,如
最后初始化
$( '#demo' ).typeahead({
name: 'test' ,
local: [ "Site518" , "Lwolf" ],
limit: 10
});
jQuery实现Twitter的自动文字补齐特效的更多相关文章
-
【微收藏】来自Twitter的自动文字补齐jQuery插件 - Typeahead.js
没图没逼格 事发有因 该插件可以结合本地数据进行一些操作.推荐关注一下H5的几种数据存储的方式(localstorage与sessionstorage.IndexedDB.离线缓存manifest文件 ...
-
auto semicolon insertion 自动分号补齐的坑
今天发现js自动分号补齐的坑,来看如下两段代码: function Hello(){ return { name: ’JavaScript’ }; } alert(Hello()); //输出unde ...
-
CocoaPods 导入第三方库头文件自动补齐
使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...
-
CocoaPods导入第三方库头文件自动补齐
使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...
-
GBin1插件推荐之马可波罗(Marco Polo),jQuery的自动补齐插件 - Autocomplete Plugin
让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...
-
jquery.autocomplete自动补齐和自定义格式
1.简单的下拉自动补齐,可以使用本地或远程数据源 <input name="autoTag" id="autoTag" /> var source ...
-
HTML5的数据自动补齐功能
使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦! <input name="frameworks" list ...
-
CentOS 7下的Vim自动补齐插件YouCompleteMe安装及配置
备注:现在对于 YouCompleteMe 的安装应采用更为简单的方法,即利用 Vundle 来安装这个插件.具体方法可见: Vundle 主页 YouCompleteMe 主页 而 .vimrc 的 ...
-
自动补齐flexselect+级联下拉框案例
在开发web应用时,经常遇到类似省市区级联下拉框操作,即选中省份自动级联加载该省份所有的市,选中市自动级联加载该市所有的区:假设省市区的数据量很大,此时用户想选中某市,因而要从上往下查找,可能半天都找 ...
随机推荐
-
用caffe跑自己的数据,基于WINDOWS的caffe
本文详细介绍,如何用caffe跑自己的图像数据用于分类. 1 首先需要安装过程见 http://www.cnblogs.com/love6tao/p/5706830.html 同时依据上面教程,生成了 ...
-
团队作业week3
请每个团队的成员划分各自的角色:PM.Dev.Test,并通过团队博客发布. 请每个团队给出团队贡献分的分配方法,团队贡献分总分数数为:20 * 团队人数.要求每两个人的分数都不相同.请在团队博客写出 ...
-
Tomcat基础教程(一)
Tomcat, 是Servlet和JSP容器,其是实现了JSP规范的servlet容器.它在servlet生命周期内包容,装载,运行,和停止servlet容器. Servlet容器的三种工作模式: 1 ...
-
C语言,调试必备的DEBUG宏定义
1. #include <stdio.h> #include <stdarg.h> //仅仅是打印函数名字替换 DEBUG <--> printf #define ...
- NULL字段对于UNIQUE INDEX失效
-
EF三种编程方式图文详解
Entity Framework4.1之前EF支持“Database First”和“Model First”编程方式,从EF4.1开始EF开始支持支持“Code First”编程方式,今天简单看一下 ...
-
Java BitSet使用场景和示例
一.什么是BitSet? 注:以下内容来自JDK API: BitSet类实现了一个按需增长的位向量.位Set的每一个组件都有一个boolean值.用非负的整数将BitSet的位编入索引.可以对每个编 ...
-
flask异步
demo def runFlask(port): init() app.config[' app.run(port=port, threaded=True) CORS(app, supports_cr ...
-
hive外部表
创建外部表.数据从HDFS获取 只是建立了链接,hdfs中的数据丢失,表中数据也丢失;hdfs数据增加,表中数据也增加 上传文件 创建外部表 删除文件 执行查询语句,发现少了
-
V$SQLAREA
1.查看消耗资源最多的SQL: SELECT hash_value, executions, buffer_gets, disk_reads, parse_calls FROM V$SQLAREA W ...