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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
jquery 笔记 事件
Nov 02 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
关于编写性能高效的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传递数据的两种方法分享
2011/09/16 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python制作mysql数据迁移脚本
2019/01/01 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
Python self用法详解
2020/11/28 Python
Python实现简单猜数字游戏
2021/02/03 Python
计算机专业应届生求职信
2014/04/06 职场文书
目标责任书范本
2014/04/16 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
高中美术教学反思
2016/02/17 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP
MySQL视图概念以及相关应用
2022/04/19 MySQL