優秀的jQuery自動補齊插件和多值輸入插件推薦

讓咱們Google一下"jQuery autocomplete plugin"(jquery自動補齊插件)。在過去的4年中,我已經Google了不少次這個組合了。然而結果並無變化多少。這裏有不少的選擇,可是沒有哪個讓我可以頗有信心的去應用到產品程序中。javascript

說實話對於選擇jQuery插件來講我很挑剔。若是個人用戶對於插件有問題的話,那麼我就得本身處理。我其實不想擔憂太多的第三方代碼,所以我本身開發了一個jQuery使用準則用來衡量須要考慮的一些問題。沒有特別的順序:插件必須有很好的文檔和註釋,過去6個月內有維護和更新,不多有問題,遵循現代jQuery編碼規範,很是靈活,能知足我80%的須要,沒有大量我不使用的功能。沒有任何一個自動補齊的插件知足上面的準則。java

馬可波羅(Marco Polo)

馬可波羅(Marco Polo),jQuery的自動補齊插件 - Autocomplete Plugin

所以我決定本身編寫一個。 瞭解一下馬可波羅(Marco Polo),一個爲獨具慧眼的開發人員準備的jQuery自動補齊插件。我認爲你會喜歡它,特別是若是你也使用個人方法來選擇jQuery插件的話。可是,不要僅僅聽我說,你最好本身試試演示,看看文檔,本身使用插件執行一下你本身的系統。這裏有一個快速幫助來解釋如何使用這個插件。jquery

開始

開始先包含jQuery和馬可波羅到你的HTML:瀏覽器

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.marcopolo.min.js"></script>

下一步,添加輸入框:jsp

<input type="text" name="userSearch" id="userSearch" />

而後,將插件關聯到輸入框編碼

$('#userSearch').marcoPolo({
  url: '/users/search',
  formatItem: function (data, $item) {
    return     data.first_name + ' ' + data.last_name;
  }, 
  onSelect: function (data, $item)     { 
    window.location = data.profile_url;
  } 
});

當搜索開始時,一個GET請求url將會經過q(搜索關鍵字)添加到查詢字符串中。咱們使用Butler來查詢。一個GET請求將建立到/users/search?q=Butler。你的後臺程序必須使用q參數來查找和返回JSON數據格式得用戶,以下:url

[   
  {     first_name: 'James',     last_name: 'Butler',     profile_url: '/users/78749',     …   },   
  {     first_name: 'Win',     last_name: 'Butler',     profile_url: '/users/41480',     …   },   
… 
]

每個JSON用戶對象將傳送到formatItem的回調選項中用來顯示結果列表。當一個用戶被選擇到的時候,他們的JSON對象就會傳送到onSelect回調選項中完成瀏覽器重定向。spa

很簡單吧!這個例子演示了一部分基本的概念,潛在的誇張能夠更加豐富。本身嘗試一下,我認爲你會很驚奇馬可波羅居然如此的靈活。插件

Manifest

馬可波羅(Marco Polo),jQuery的自動補齊插件 - Autocomplete Plugin

Manifest是一個添加更多驚喜到多選輸入的插件。Email地址中的接受字段是一個很是好的例子。你能夠只簡單提供通常文本輸入,要求用戶使用分號手工分開每個收件人。 可是移除收件人是一個費勁的事情,可是使用這個插件,你知道用戶會很是高興這種用戶操做體驗的。code

相關文章
相關標籤/搜索