使用删除选项作为 x 过滤一个输入多个值 [关闭]答案

【问题标题】：Filtering in one input multiple values with remove option as x [closed]使用删除选项作为 x 过滤一个输入多个值 [关闭]
【发布时间】：2013-10-02 19:33:36
【问题描述】：

我在互联网上搜索过，要么我不知道具体要寻找什么，要么不支持这种类型。

我需要在 html 中使用 js 和 jquery 实现以下输入。这与 stackoverflows 标签输入完全一样。在空格后面加上 x。

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

很抱歉，现在我意识到我没有很好地表达自己。我不需要自动完成，只需使用删除选项添加多个标签作为 x 仅由空格分隔

【问题讨论】：

您要查找的内容称为autocomplete 控件。 jQueryUI 包含一个，尽管需要 amwnding 才能使用标签。如果您在谷歌上搜索“自动完成标签”，还有其他几个第三方插件可以为您完成此操作。

标签： javascript jquery html input filtering

【解决方案1】：

HTML：

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

jquery：

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('');   
}

在输入字段中键入内容并按空格后，它会生成一个包含您的文本的 div，并将其放在输入的左侧。如果这是您正在寻找的，并且需要更多解释，我很乐意向您解释这是如何工作的。

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

【讨论】：

基本上是这样的。谢谢！任何想法我怎样才能格式化它看起来更平滑一点？
也。字段可以保存在输入中吗？不像 div
基本上你必须将 css 应用于 .singleSelected 。尝试给边界一些半径，给 div 一个浅灰色的背景，黑色字体颜色。您还可以分别格式化结束 X 和内容（“.singleSelected .Content”、“.singleSelected .Close”）。至于将所选数据存储在输入中而不是 div 中，我不知道。据我所知，您不能单独设置输入内容的样式。如果您不知道如何检索所选数据，稍后从 div 中，我可以帮助您。在原始答案中查找retrieveData 函数。
谢谢。我设法以我想要的方式获得了一个工作示例。祝你有美好的一天。