jQuery實作Twitter的自動文字補齊特效_jquery

上圖效果可以使用jQuery插件Typeahead.js來實現，這款jQuery插件來自於Twitter的一個新的項目，支援遠端和本地的資料集。比較有特色的地方在於你可以將資料集使用本地儲存(local storage)來保存在本地，有效的提高使用者體驗。同時也擁有許多遠端資料集的處理選項，例如（請求頻率，最大的並發請求數，等等）。

主要特性

支援資料本地保存，客戶端加載，最佳化加載速度
支援多語言，並且支援阿拉伯文
支援Hogan.js模板引擎整合
支援多重資料集拼裝
支援本地和遠端的資料集

專案地址

http://twitter.github.io/typeahead.js

如何使用

首先在網頁 head 中引入 jQuery 框架和 Typeahead.js 外掛程式的相關 JS 和 CSS 檔案

複製程式碼 程式碼如下:

然後加入要想實現動畫的 HTML 元素，如

複製程式碼 程式碼如下:

最後初始化

複製程式碼 程式碼如下:

view source
$(  '#demo'  ).typeahead({
name:  'test'  ,
local: [  "Site518"  ,  "Lwolf"  ],
limit: 10
});