javascript代码实例教程-jQuery实现Twitter的自动文字补齐特效

发布时间:2018-12-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery实现Twitter的自动文字补齐特效脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

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

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

主要特性

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

项目地址

https://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
});

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery实现Twitter的自动文字补齐特效全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery实现Twitter的自动文字补齐特效所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:CSSHTML