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

我正在尝试做一些类似于stackoverflow中添加关键字的东西

我只是被HTML部分或javascript卡住了

当一个关键字被点击时，我如何使它在输入字段中固定？与stackoverflow中一样，它变为蓝色，旁边有一个删除按钮

目前，结果显示在新的

中的

下面

添加关键字

它不是真正的

元素。它只是看起来像输入。您应该使用常规的

，并在其上附加（例如）样式化的

试试这个jQuery插件。 您可以使用jQuery.autocomplete

我在生产中使用这个插件，这没关系。

没有“简单”的方法可以做到，你需要的不仅仅是一个

来实现这种行为

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

---

回顾一下这个问题：

回答者建议的那个家伙

（）

还有更多。看看吧，你可能会找到一个最适合你的解决方案

派对有点晚了，但我创建了一个作为React组件。底层代码是纯javascript（没有jQuery），因此应该很容易破译

---

查看

taginput.jsx

文件了解它的工作原理。

您可以发布您到目前为止尝试过的内容吗？只需右键单击StackOverflow标记实现，然后单击“Inspect元素”查看它的HTML结构是如何实现的。您可以将其与任何autosuggest插件一起使用，如-@tymeJV在stackoverflow的源代码中添加了代码，我发现这里是生成的源代码（在javascript执行之后）。是的，还有真正的

标签。当您在

元素的标记列表中添加一些内容时，javascript会更改real

的值。在我的屏幕上的源代码中看不到它，但它的值是

hellowo

例如，在自定义表单元素中也有相同的逻辑。当您想要创建自定义

选择
字段时，您只需创建下拉列表。当用户单击下拉项时，您可以手动（我的意思是在javascript中）更改real
（它是隐藏的，但存在于标记中）的值。我不使用jQuery，但我会找到一条出路，感谢那些对非jQuery示例感兴趣的人，请参阅下面的答案
<fieldset>
    <label for="title">Add keyword<label>
    <input class="input" type="text" size="30" onkeyup="searchFunction()" onkeydown="searchFunction()">
</fieldset>

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