CSS - 像Pinterest的泡泡輸入搜索欄

Question

我有一個搜索欄，用戶輸入一個關鍵字，我希望關鍵字被包含在一個十字架的氣泡中，一旦用戶按下空格鍵輸入其他關鍵字。類似於Pinterest搜索欄中所做的操作，如下圖所示。

我可以讓泡沫CSS周圍文本，但如何從內部的輸入框是我停留在吸引他們。

Answer 1

這是值得檢查的Select2庫有標籤選項，你可以看到它在行動here（在「標記支持」部分）。

另外，您可以檢出以下CodePen鏈路上的tag based search

http://codepen.io/jonahvsweb/pen/LGVRaX

希望這有助於！

Answer 2

檢查好友列表在這裏：http://terrainformatica.com/formation/demo1.htm 我做了簡單的jQuery插件它，而前：http://terrainformatica.com/formation/js/jquery.list-input.js

Answer 3

檢查harvestHQ選上的插件： https://harvesthq.github.io/chosen/

Answer 4

Select2和Chosen都是很好的選擇，但我發現Selectize.js以最適合我的用例（高度可定製）。它更易於使用，可擴展且依賴性很少。