javascript - 如何使用 jQuery 将 html 文本框中的单词转换为 "tag"？

Question

我想编写一个奇特的搜索框。 每次当你输入一个词然后按下空格键时，这个词应该被转换成一个“标签”。对于“标签”，我的意思是:

您在此处看到的标签来 self 在 stackoverflow 中的配置文件设置。在这里，通过按“添加”按钮创建一个标签。但我希望这个词成为一个标签，而不是通过按下按钮，而是每次我按下空格键。

你有解决我的问题的方法吗？

我在谷歌中搜索了很长时间，但我没有找到任何东西!

感谢您的帮助!

:D

Answer 1

https://jsfiddle.net/geop94u7/

有点健壮，可以打包以在考虑一些因素(范围界定、多实例等)后重新使用。

首先，标记:

<div id="tags" class="cf"></div>
<input type="text" id="tagname" />

然后是 JS，防止重复，并允许删除已经选择的标签(然后可以重新选择)。

$('#tagname').keypress(function(e) {
    var $t = $(e.target),
        tmap = $t.data('tmap') || {},
        n = e.keyCode || e.which,
        val;
    $t.data('tmap', tmap);

    if (n === 32) {
        val = $.trim($t.val());
        if (val !== '' && tmap[val] === undefined) {
            tmap[val] = 1;
            $('#tags').append($('<div>').addClass('tag').html(val));
            $t.val('');
        }
    }
});

$('#tags').on('click', '.tag', function(e) {
    var $t = $(e.target);
    txt = $.trim($t.text());
    $t.remove();
    delete $('#tagname').data('tmap')[txt];
});

最后，一些带有删除指示器的常规 CSS:

#tags {
    width: 100%;
    padding: 10px;
    float: none;
    clear: both;
}

.tag {
    float: left;
    margin: 5px;
    padding: 5px;
    background: #efefef;
    cursor: pointer;
    border: 1px solid #e0e0e0;
}

.tag::after {
    content: '\2612';
    float: right;
    display: block;
    margin: -2px 0 0 10px;
}

如果不需要从头开始重建，您最好使用强大的插件(有很多)。