上圖效果可以使用jQuery插件Typeahead.js來實現(xiàn)，這款jQuery插件來自于Twitter的一個新的項目，支持遠程和本地的數(shù)據(jù)集。比較有特色的地方在于你可以將數(shù)據(jù)集使用本地存儲(local storage)來保存在本地，有效的提高用戶體驗。同時也擁有很多遠程數(shù)據(jù)集的處理選項，例如（請求頻率，最大的并發(fā)請求數(shù)，等等）。
主要特性
支持?jǐn)?shù)據(jù)本地保存，客戶端加載，優(yōu)化加載速度
支持多語言，并且支持阿拉伯文
支持Hogan.js模板引擎整合
支持多數(shù)據(jù)集拼裝
支持本地和遠程的數(shù)據(jù)集
項目地址
如何使用
首先在網(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
});
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試