创建输入表单以添加/删除关键字

Question

我正在尝试创建类似于stackoverflow中添加关键字的内容。

我只是坚持使用HTML部分或javascript？

当找到关键字的关键字时，如何在输入字段中修复它？就像在stackoverflow中一样，它会变成蓝色，旁边有一个删除按钮。

目前，结果显示在<input>下方的新<div>内。

<fieldset>
    <label for="title">Add keyword<label>
    <input class="input" type="text" size="30" onkeyup="searchFunction()" onkeydown="searchFunction()">
</fieldset>

<div id="livesearch"></div>

Answer 1

回顾这个问题：

jQuery autocomplete tagging plug-in like StackOverflow's input tags?

回答者提出的建议

（demo）https://github.com/aehlke/tag-it

等等。看看你可能找到一个最适合你的解决方案！

Answer 2

这不是真正的<input>元素。它只是看起来像输入。您应该使用常规<div>并附加（例如）风格化<span>。

试试jQuery https://github.com/xoxco/jQuery-Tags-Input的这个插件。 您可以使用jQuery.autocomplete。

我在制作中使用这个插件，没关系。

Answer 3

没有“简单”的方法，你需要更多的<input>来实现这种行为。

然而，有一些好的插件使用jQuery （不知道任何用普通的javascript制作）已经做到了：

TextExt

TokenInput

VisualSeach

Answer 4

派对晚了一点，但我创建了一个作为React组件。底层代码是普通的javascript（没有jQuery），所以应该很容易破解。

sterlingwes/react-taginput

请参阅taginput.jsx文件，了解其工作原理。