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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
详解webpack babel的配置
Jan 09 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
JS开发常用工具函数(小结)
Jul 04 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中显示数组与对象的实现代码
2011/04/18 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
两款万能的php分页类
2015/11/12 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
移动前端图片压缩上传的实例
2017/12/06 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python matlibplot绘制3D图形
2018/07/02 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python中and和or如何使用
2020/05/28 Python
python实现单机五子棋
2020/08/28 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
六年级学生评语
2014/04/22 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
农业项目投资意向书
2015/05/09 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
HTML基础详解(上)
2021/10/16 HTML / CSS
python数字图像处理实现图像的形变与缩放
2022/06/28 Python