Javascript 在一个输入中过滤多个值，删除选项为x

我在互联网上搜索过，要么我不知道到底要找什么，要么就是不支持这种类型

我需要使用js和jquery实现以下输入，以便在html中进行过滤。 这与stackoverflows标签输入完全相同。空格后，在末尾添加x

有人知道怎么做吗？有人能给我一些样品吗

对不起，现在我意识到我表达得不够好。 我不需要自动完成，只需添加多个标记，并使用删除选项作为x，仅以空格分隔

HTML:

<div class='container'>
<div class='selectedElements'></div>
<input type='text' id='useToSelect' value='' onkeyup="testForSpace();">
</div>

---

您正在寻找的是一个称为

自动完成的控件。jQueryUI包含一个，但需要使用amwning来处理标记。如果你在谷歌上搜索“自动完成标签”，还有其他几个第三方插件可以帮你做到这一点。谢谢有什么想法吗？我怎样才能使它看起来更平滑一点呢？还有。字段是否可以保存在输入中？基本上，您不需要将css应用于.singleSelected。尝试为边框指定一些半径，为div设置浅灰色背景，并使用黑色字体颜色。您还可以分别格式化结束X和内容（“.singleSelected.content”、“.singleSelected.Close”）。至于将所选数据存储在输入中而不是存储在div中，我不知道。据我所知，您不能单独设置输入内容的样式。如果您不知道如何稍后从div检索所选数据，我可以帮助您。在原始答案中查找retrieveData函数。谢谢。我设法以我想要的方式得到了一个有效的例子。祝您有个美好的一天。
function testForSpace()
{
    text=$('#useToSelect').val();
    if (text[text.length-1] == ' ') {
        if (text == '') {
            $("#useToSelect").val("");   
        }
    currentSelected=$(".selectedElements").html();
    newSelected="<div class='singleSelectedContainer' onclick='destroyElement(this)' style='float:left;'><div class='singleSelected'><div class='Content'>" + text + "</div><div class='Close'> &nbsp;  x </div><div clear:left;></div></div><div style='float:left; width:7px;'>&nbsp;</div></div>";
    $(".selectedElements").html(currentSelected + newSelected);
    $("#useToSelect").val("");
    }
 }


function destroyElement(elem) {
    $(elem).html('');   
}

function retrieveData() 
{ 
  dataArray=new Array(); 
  $(".singleSelected").each(function() {
    dataArray.push($(this .Content).html());
  });
  return dataArray; //this contains the selected elements 
}