CSS - 泡泡输入搜索栏，如Pinterest

Question

我有一个搜索栏，用户输入一个关键字，我希望关键字被包含在一个十字架的气泡中，一旦用户按下空格输入另一个关键字就将其删除。类似于Pinterest搜索栏中的内容，如下图所示。

我可以在CSS中围绕文本制作气泡，但是如何从输入框内部绘制它们是我被困在的地方。

Answer 1

值得查看带有标记选项的Select2库，您可以在行动here中看到它（在＆＃34;标记支持＆＃34;部分下）。

或者，您可以在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 Chosen插件： https://harvesthq.github.io/chosen/

Answer 4

Select2和Chosen都是不错的选择，但我发现Selectize.js最适合我的用例（高度可定制）。它易于使用，可扩展，几乎没有依赖。