2015-10-14 104 views
0

我試圖實施具有基本的web頁面的Tag bar的相同屬性出現,當你問的堆棧溢出問題,一個搜索欄:如何實現的JavaScript/CSS,標籤欄

enter image description here

它應該有以下屬性:

  • 允許用戶直接輸入它。
  • 用用戶輸入的相同字母拉起entries
  • 允許通過在鍵盤上刪除或按下插入的元素來刪除條目。

我有興趣瞭解這種元素的底層結構以及如何設置相互調用而不僅僅是代碼的監聽器和函數。任何人都可以請幫我弄清楚我需要實現的函數的骨架嗎?

+1

http://stackoverflow.com/questions/5031162/plugin-to-separate-tags-like-the-stackoverflows-input-tags-interface – epascarello

+0

jQuery UI Autocomplete,http://api.jqueryui.com/autocomplete / – TricksfortheWeb

回答

1

除了使用jQuery UI插件,最簡單的方法是使用文本輸入框和ul。你可以使用jQuery(或者其他的東西取決於你是否使用框架)來聽取輸入框中的任何改變。

在這一點上,你有一個選擇,取決於你的應用程序的其餘部分:過濾可以發生在前端或後端。因爲數據庫通常很快,所以如果你有一個非常大的數據集,過濾它可能是有意義的。否則,你可以抓住整個列表並使用JS進行過濾。

無論採用哪種方式,都會在啓動過濾的更改上發生回調,然後將結果呈現到ul中。