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

时间:2021-09-14 00:26:30

上图效果可以使用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 
}); 

jQuery实现Twitter的自动文字补齐特效的更多相关文章

  1. 【微收藏】来自Twitter的自动文字补齐jQuery插件 - Typeahead&period;js

    没图没逼格 事发有因 该插件可以结合本地数据进行一些操作.推荐关注一下H5的几种数据存储的方式(localstorage与sessionstorage.IndexedDB.离线缓存manifest文件 ...

  2. auto semicolon insertion 自动分号补齐的坑

    今天发现js自动分号补齐的坑,来看如下两段代码: function Hello(){ return { name: ’JavaScript’ }; } alert(Hello()); //输出unde ...

  3. CocoaPods 导入第三方库头文件自动补齐

    使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...

  4. CocoaPods导入第三方库头文件自动补齐

    使用了一段时间CocoaPods来管理Objective-c的类库,方便了不少.但是有一个小问题,当我在xcode输入import关键字的时候,没有自动联想补齐代码的功能,需要手工敲全了文件名,难以适 ...

  5. GBin1插件推荐之马可波罗(Marco Polo&rpar;,jQuery的自动补齐插件 - Autocomplete Plugin

    让我们Google一下"jQuery autocomplete plugin"(jquery自动补齐插件).在过去的4年中,我已经Google了很多次这个组合了.然而结果并没有变化 ...

  6. jquery&period;autocomplete自动补齐和自定义格式

    1.简单的下拉自动补齐,可以使用本地或远程数据源 <input name="autoTag" id="autoTag" /> var source ...

  7. HTML5的数据自动补齐功能

    使用datalist元素,HTML5允许使用一组数据来生成自动补齐功能,现在你不需要使用第三方js代码或者类库啦! <input name="frameworks" list ...

  8. CentOS 7下的Vim自动补齐插件YouCompleteMe安装及配置

    备注:现在对于 YouCompleteMe 的安装应采用更为简单的方法,即利用 Vundle 来安装这个插件.具体方法可见: Vundle 主页 YouCompleteMe 主页 而 .vimrc 的 ...

  9. 自动补齐flexselect&plus;级联下拉框案例

    在开发web应用时,经常遇到类似省市区级联下拉框操作,即选中省份自动级联加载该省份所有的市,选中市自动级联加载该市所有的区:假设省市区的数据量很大,此时用户想选中某市,因而要从上往下查找,可能半天都找 ...

随机推荐

  1. 用caffe跑自己的数据,基于WINDOWS的caffe

    本文详细介绍,如何用caffe跑自己的图像数据用于分类. 1 首先需要安装过程见 http://www.cnblogs.com/love6tao/p/5706830.html 同时依据上面教程,生成了 ...

  2. 团队作业week3

    请每个团队的成员划分各自的角色:PM.Dev.Test,并通过团队博客发布. 请每个团队给出团队贡献分的分配方法,团队贡献分总分数数为:20 * 团队人数.要求每两个人的分数都不相同.请在团队博客写出 ...

  3. Tomcat基础教程(一)

    Tomcat, 是Servlet和JSP容器,其是实现了JSP规范的servlet容器.它在servlet生命周期内包容,装载,运行,和停止servlet容器. Servlet容器的三种工作模式: 1 ...

  4. C语言,调试必备的DEBUG宏定义

    1. #include <stdio.h> #include <stdarg.h> //仅仅是打印函数名字替换 DEBUG <--> printf #define ...

  5. NULL字段对于UNIQUE INDEX失效

  6. EF三种编程方式图文详解

    Entity Framework4.1之前EF支持“Database First”和“Model First”编程方式,从EF4.1开始EF开始支持支持“Code First”编程方式,今天简单看一下 ...

  7. Java BitSet使用场景和示例

    一.什么是BitSet? 注:以下内容来自JDK API: BitSet类实现了一个按需增长的位向量.位Set的每一个组件都有一个boolean值.用非负的整数将BitSet的位编入索引.可以对每个编 ...

  8. flask异步

    demo def runFlask(port): init() app.config[' app.run(port=port, threaded=True) CORS(app, supports_cr ...

  9. hive外部表

    创建外部表.数据从HDFS获取  只是建立了链接,hdfs中的数据丢失,表中数据也丢失;hdfs数据增加,表中数据也增加 上传文件 创建外部表 删除文件 执行查询语句,发现少了

  10. V&dollar;SQLAREA

    1.查看消耗资源最多的SQL: SELECT hash_value, executions, buffer_gets, disk_reads, parse_calls FROM V$SQLAREA W ...