jQuery实现Twitter的自动文字补齐特效


Posted in Javascript onNovember 28, 2014

jQuery实现Twitter的自动文字补齐特效

上图效果可以使用jQuery插件Typeahead.js来实现,这款jQuery插件来自于Twitter的一个新的项目,支持远程和本地的数据集。比较有特色的地方在于你可以将数据集使用本地存储(local storage)来保存在本地,有效的提高用户体验。同时也拥有很多远程数据集的处理选项,例如(请求频率,最大的并发请求数,等等)。

主要特性

支持数据本地保存,客户端加载,优化加载速度
支持多语言,并且支持阿拉伯文
支持Hogan.js模板引擎整合
支持多数据集拼装
支持本地和远程的数据集

项目地址

http://twitter.github.io/typeahead.js

如何使用

首先在网页 head 中引入 jQuery 框架和 Typeahead.js 插件的相关 JS 和 CSS 文件

<link href=  "typeahead.min.css"   rel=  "stylesheet"  > 

<script src=  "jquery-1.9.1.min.js"  ></script> 

<script src=  "typeahead.min.js"  ></script>

然后添加要想实现动画的 HTML 元素,如

<input id=  "demo"   class  =  "typeahead"   type=  "text"   placeholder=  "test"  >

最后初始化

view source

$(  '#demo'  ).typeahead({ 

name:  'test'  , 

local: [  "Site518"  ,  "Lwolf"  ], 

limit: 10 

});
Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
js模块加载方式浅析
Aug 12 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 #Javascript
推荐25个超炫的jQuery网格插件
Nov 28 #Javascript
实例分析javascript中的call()和apply()方法
Nov 28 #Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 #Javascript
jquery+php实现搜索框自动提示
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 #Javascript
You might like
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
php的curl封装类用法实例
2014/11/07 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
javascript一点特殊用法
2008/05/28 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python自动zip压缩目录的方法
2015/06/28 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python实现超市商品销售管理系统
2019/11/22 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
关于毕业的广播稿
2014/01/10 职场文书
出生公证委托书
2014/04/03 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
节能环保演讲稿
2014/08/28 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
二审代理词范文
2015/05/25 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL