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最适合我的用例（高度可定制）。 它易于使用，可扩展，几乎没有依赖项。