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

Create input form to add/remove keywords

本文关键字：删除 关键字 添加 输入 表单 创建      更新时间：2023-09-26

我正在尝试制作类似于在堆栈溢出中添加关键字的内容。

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

当找到一个关键字并被点击时，如何使其在输入字段中固定？就像在堆栈溢出中一样，它变成蓝色，旁边有一个删除按钮。

目前，结果显示在<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>
它

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

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

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

回头看看这个SO问题：

jQuery自动完成标记插件，如StackOverflow的输入标签？

回答建议的家伙

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

等等。看看吧，您可能会找到最适合您的解决方案！

没有"简单"的方法可以做到这一点，你需要更多，而不仅仅是一个<input>来实现这种行为。

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

文本扩展

令牌输入

视觉搜索

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

Sterlingwes/React-taginput

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

相关文章：