jQuery实现Twitter的自动文字补齐特效
上图效果可以使用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应用时,经常遇到类似省市区级联下拉框操作,即选中省份自动级联加载该省份所有的市,选中市自动级联加载该市所有的区:假设省市区的数据量很大,此时用户想选中某市,因而要从上往下查找,可能半天都找 ...
随机推荐
- 再次轻度破解EXE文件
在经历股市多年的大起大落.大赚大赔之后.痛定思痛.深切感到在金融市场拼搏.必须建立健全交易纪律守则,严格运行. 这套完整的纪律守则,就是"交易系统". 在很多方面,它与一般的专家系 ...
- VoltDB公布4.0版本号,大步提高内存实时分析速度,进军操作数据库市场
号称世界上最快的关系数据库的VoltDB与2014年1月29号(美国东部时间)公布下一代数据库4.0版本号.新的版本号有非常多地方的改进,大步挺高系统性能.在过去的13年,VoltdDB号称自己公司较 ...
- Spring XD 1.1 M2 and 1.0.3 released---support kafka
官方地址:http://spring.io/blog/2014/12/23/spring-xd-1-1-m2-and-1-0-3-released On behalf of the Spring XD ...
- 【NodeJs】使用TCP套接字收发数据的简单实例
因为TCP协议是流协议,在收发数据的时候会有粘包的问题.本例使用自定义的SPtcp封包协议对TCP数据再进行一次封装,解决了粘包问题. 注:其性能仍有待优化.优化方向:使用TCP自带的接收窗口缓存. ...
- django开发框架之jumpserver
发现一个不错的开源堡垒机 jumpserver: https://github.com/ibuler/jumpserver 最开始看的是jumpserver2.0.0 版本,具体的实现方式是: 1. ...
- JS实现图片宽高的等比缩放
关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...
- Android canvas rotate():平移旋转坐标系至任意原点任意角度-------附:android反三角函数小结
自然状态下,坐标系以屏幕左上角为原点,向右是x正轴,向下是y正轴.现在要使坐标系的原点平移至任一点O(x,y),且旋转a角度,如何实现? 交待下我的问题背景,已知屏幕上有两点p1和p2,构成直线l.我 ...
- mysql case when then else end 用法
select case when 判断条件 then 输出结果 else 输出结果 end from table
- 在后台CS文件里面,隐藏和显示Repeater里面控件
<asp:Repeater ID="Repeater1" runat="server"><ItemTemplate><asp:Pa ...
- 26、Jquery 基础
什么是Jquery? Jquery是一套Javascript脚本库. 使用时需要先下载下来,并引用到项目中. 下载地址:http://jquery.com/download/ 目前jquery分为 1 ...