首頁 > web前端 > js教程 > jQuery實作Twitter的自動文字補齊特效_jquery

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

WBOY
發布: 2016-05-16 16:29:45
原創
1627 人瀏覽過

上圖效果可以使用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
});
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板