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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
js实现小星星游戏
2020/03/23 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
Python编写检测数据库SA用户的方法
2014/07/11 Python
详解Python验证码识别
2016/01/25 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
利用python求积分的实例
2019/07/03 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
高中军训第一天感言
2014/03/06 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
JavaScript组合继承详解
2021/11/07 Javascript
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server