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