jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效
上圖效果可以使用jQuery插件Typeahead.js來(lái)實(shí)現(xiàn),這款jQuery插件來(lái)自于Twitter的一個(gè)新的項(xiàng)目,支持遠(yuǎn)程和本地的數(shù)據(jù)集。比較有特色的地方在于你可以將數(shù)據(jù)集使用本地存儲(chǔ)(local storage)來(lái)保存在本地,有效的提高用戶(hù)體驗(yàn)。同時(shí)也擁有很多遠(yuǎn)程數(shù)據(jù)集的處理選項(xiàng),例如(請(qǐng)求頻率,最大的并發(fā)請(qǐng)求數(shù),等等)。
主要特性
支持?jǐn)?shù)據(jù)本地保存,客戶(hù)端加載,優(yōu)化加載速度
支持多語(yǔ)言,并且支持阿拉伯文
支持Hogan.js模板引擎整合
支持多數(shù)據(jù)集拼裝
支持本地和遠(yuǎn)程的數(shù)據(jù)集
項(xiàng)目地址
http://twitter.github.io/typeahead.js
如何使用
首先在網(wǎng)頁(yè) head 中引入 jQuery 框架和 Typeahead.js 插件的相關(guān) JS 和 CSS 文件
<link href= "typeahead.min.css" rel= "stylesheet" >
<script src= "jquery-1.9.1.min.js" ></script>
<script src= "typeahead.min.js" ></script>
然后添加要想實(shí)現(xiàn)動(dòng)畫(huà)的 HTML 元素,如
<input id= "demo" class = "typeahead" type= "text" placeholder= "test" >
最后初始化
view source
$( '#demo' ).typeahead({
name: 'test' ,
local: [ "Site518" , "Lwolf" ],
limit: 10
});
相關(guān)文章
jquery檢測(cè)input checked 控件是否被選中的方法
這篇文章主要介紹了jquery檢測(cè)input checked 控件是否被選中的方法,需要的朋友可以參考下2014-03-03jQuery實(shí)現(xiàn)右下角可縮放大小的層完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)右下角可縮放大小的層,以完整實(shí)例形式分析了jQuery頁(yè)面元素及相關(guān)樣式屬性操作技巧,需要的朋友可以參考下2016-06-06juqery 學(xué)習(xí)之三 選擇器 簡(jiǎn)單 內(nèi)容
juqery 學(xué)習(xí)之三 選擇器 簡(jiǎn)單 內(nèi)容,學(xué)習(xí)jquery的朋友可以參考下。2010-11-11自定義類(lèi)似于jQuery UI Selectable 的Vue指令v-selectable
這篇文章主要介紹了自定義類(lèi)似于jQuery UI Selectable 的Vue指令v-selectable的相關(guān)資料,需要的朋友可以參考下2017-08-08jquery實(shí)現(xiàn)不同大小瀏覽器使用不同的css樣式表的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)不同大小瀏覽器使用不同的css樣式表的方法,需要的朋友可以參考下2014-04-04JQuery下的Live方法和$.browser方法使用代碼
網(wǎng)站做好了,老師卻要求要3級(jí)菜單,無(wú)奈只好去做3級(jí)菜單了。這次3級(jí)菜單的思路是在原有不變的基礎(chǔ)上,對(duì)有3級(jí)菜單的ID,選擇進(jìn)入新的一個(gè)控件。在這個(gè)新的控件里用ajax去請(qǐng)求其3級(jí)目錄里的東西。2010-06-06jQuery開(kāi)發(fā)者都需要知道的5個(gè)小技巧
JQuery是個(gè)不錯(cuò)的框架,以下總結(jié)了5個(gè)每個(gè)網(wǎng)站開(kāi)發(fā)者都應(yīng)該知道的小技巧,都是一些非常不錯(cuò)的,經(jīng)常能用得到的。2010-01-01jQuery動(dòng)畫(huà)效果實(shí)現(xiàn)圖片無(wú)縫連續(xù)滾動(dòng)
這篇文章主要為大家介紹了jQuery動(dòng)畫(huà)效果實(shí)現(xiàn)圖片無(wú)縫連續(xù)滾動(dòng),實(shí)現(xiàn)類(lèi)似連續(xù)不間斷的滾動(dòng)廣告位,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01