5

我正在尝试制作类似于在您添加关键字的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>
4

4 回答 4

3

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

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

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

于 2013-10-17T14:16:49.717 回答
2

回头看看这个 SO 问题：

jQuery 自动完成标记插件类似于 StackOverflow 的输入标记？

回答建议的家伙

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

以及更多。检查一下，您可能会找到最适合您的解决方案！

于 2013-10-17T14:25:32.810 回答
0

没有“简单”的方法可以做到这一点，你需要更多的东西<input>来实现这种行为。

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

文本分机

令牌输入

视觉搜索

于 2013-10-17T14:25:28.377 回答
0

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

sterlingwes/react-taginput

查看taginput.jsx文件以了解它是如何工作的。

于 2014-06-07T01:25:14.230 回答