jQuery實現Twitter的自動文字補齊特效
更新時間：2014年11月28日 16:52:58 投稿：hebedich
本文介紹了一款jQuery實現的文字自動補全特效的插件，該插件可以結合本地數據進行一些操作。推薦關注一下H5的幾種數據存儲的方式（localstorage與sessionstorage、IndexedDB、離線緩存manifest文件）
上圖效果可以使用jQuery插件Typeahead.js來實現，這款jQuery插件來自于Twitter的一個新的項目，支持遠程和本地的數據集。比較有特色的地方在于你可以將數據集使用本地存儲(local storage)來保存在本地，有效的提高用戶體驗。同時也擁有很多遠程數據集的處理選項，例如（請求頻率，最大的并發(fā)請求數，等等）。
主要特性
支持數據本地保存，客戶端加載，優(yōu)化加載速度
支持多語言，并且支持阿拉伯文
支持Hogan.js模板引擎整合
支持多數據集拼裝
支持本地和遠程的數據集
項目地址
http://twitter.github.io/typeahead.js
如何使用
首先在網頁 head 中引入 jQuery 框架和 Typeahead.js 插件的相關 JS 和 CSS 文件
復制代碼 代碼如下:
<link href= "typeahead.min.css" rel= "stylesheet" >
<script src= "jquery-1.9.1.min.js" ></script>
<script src= "typeahead.min.js" ></script>
然后添加要想實現動畫的 HTML 元素，如
復制代碼 代碼如下:
<input id= "demo" class = "typeahead" type= "text" placeholder= "test" >
最后初始化
復制代碼 代碼如下:
view source
$( '#demo' ).typeahead({
name: 'test' ,
local: [ "Site518" , "Lwolf" ],
limit: 10
});
相關文章
JQuery居然沒有操作cookie相關的函數，搜了下官方有個cookie的插件。2010-04-04
jQuery實現動態(tài)添加節(jié)點與遍歷節(jié)點功能示例
這篇文章主要介紹了jQuery實現動態(tài)添加節(jié)點與遍歷節(jié)點功能,結合實例形式分析了jQuery針對頁面元素節(jié)點元素的動態(tài)添加與遍歷相關操作技巧,需要的朋友可以參考下2017-11-11
學習開源框架，童鞋們最想學到的就是設計的思想和實現的技巧。最近研究jQuery源碼，記錄一下我對jquery的理解和心得，跟大家分享，權當拋磚引玉。2014-11-11
artDialog，一個jquery的對話框插件但是在使用時發(fā)現鼠標雙擊時會自半對話框，下面與大家分享下具體的修改過程，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了jQuery代碼實現實時獲取時間功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
JQuery實現的彈出層，js和css可根據自己的實際情況而定，下面是具體的實現代碼，大家不妨參考下2014-05-05
頁面a.html域名為www.a.com嵌入頁面http://www.b.com/b.html,b.html要調用a.html中的js函數，由于兩個頁面不在一個域中，會提示沒權限。如何解決該問題呢，請看下面示例代碼。2015-03-03
jquery之ajaxfileupload異步上傳插件(附工程代碼)
在處理文件上傳時需要使用到文件的異步上傳，這里使用Jquery Ajax File Uploader這個組件,服務器端采用struts2來處理文件上傳2013-04-04
這篇文章主要介紹了jquery Ajax 全局調用封裝實例詳解的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了jQuery簡單實現禁用右鍵菜單的方法，非常的簡單實用，這里分享給大家，有需要的小伙伴直接拿走使用。2015-03-03