CSS-泡泡輸入搜索欄（如Pinterest）

Question

我有一個搜索欄，用戶可以在其中輸入關鍵字，並且希望用戶在按下空格鍵輸入另一個關鍵字后，將其括在帶有十字的氣泡中，以將其刪除。 如下圖所示，類似在Pinterest搜索欄上所做的事情。

我可以在CSS中使文本周圍出現氣泡，但是如何在輸入框中繪制文本是我所堅持的。

Answer 1

值得一看的是帶有標簽選項的Select2庫。您可以在這里看到它的使用情況（在“標簽支持”部分下）。

或者，您可以在tag based search簽出以下CodePen鏈接

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 Chosen插件： https ://harvesthq.github.io/chosen/

Answer 4

Select2和Chosen都是不錯的選擇，但我發現Selectize.js最適合我的用例（高度可定制）。 它易於使用，可擴展，幾乎沒有依賴項。