Question

我想编写一个花哨的搜索框。每当您键入单词然后按空格键时，该单词应转换为“标签”。 “tag”我的意思是：

您可以在此处看到的标签来自stackoverflow的配置文件设置。在这里，通过按“添加”-Button创建标签。但是我希望这个词不是按一个按钮就能成为一个标签，但每次按下空格键时都会这样。

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

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

感谢您的帮助！

：d

Answer 1

这是一个快速的小提琴https://jsfiddle.net/lexicalnoscope/4ouh7m97/。我有点讨厌使用jQuery这样的东西，所以它在普通的javascript中。脚本部分如下所示：

var output = document.getElementById('output'),
    input = document.querySelector('input');

    input.onkeyup = function(e){
      if(e.keyCode == 32) { //check for spacebar
        var tag = document.createElement('span');
        tag.className = "tag";
        tag.textContent = input.value.trim();
        input.value = "";
        output.appendChild(tag)
      }
    }

Answer 2

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;
}

如果从头开始重建不是一项任务，你最好使用强大的插件（有很多）。

如何使用jQuery将html文本框中的单词转换为“标记”？

2 个答案: