多选择控件jqueryui

我有一个在HTML页面中运行的输入。我使用的是jQuery UI。我希望用户在输入中键入一些文本，然后一旦他按下Enter键，输入将变为空，他输入的文本将显示在下方，旁边有一个X。这将允许用户输入许多选项，然后通过单击相应的X按钮删除其中任何选项。我附上了我想要实现的目标的说明：

是否有一个jQuery UI控件可以帮助我实现这一点？如果没有，你会怎么做

---

谢谢

如果您对jquery没有意见，我可以给出一个方法

1使用输入框创建表单

2创建表单单击事件//返回flase不提交表单

$('#target').submit(function() {
   // get the inputs text by using .val() on input
   // set the value to the label defined // add label dynamically or a div tag or a span tag , anything should be fine
   // make one more x image along with label
  return false;

});

3为图像指定一个类名，并为图像再设置一个单击事件

$('.Imageclass').live('click', function() {
      remove the label or hide it using jquery selector
});

---

我给了psuedo代码之类的东西，这应该是您想要的

如果您对jquery没有意见，我可以给出一个方法

1使用输入框创建表单

2创建表单单击事件//返回flase不提交表单

$('#target').submit(function() {
   // get the inputs text by using .val() on input
   // set the value to the label defined // add label dynamically or a div tag or a span tag , anything should be fine
   // make one more x image along with label
  return false;

});

3为图像指定一个类名，并为图像再设置一个单击事件

$('.Imageclass').live('click', function() {
      remove the label or hide it using jquery selector
});

---

我给了psuedo代码之类的东西，这应该是您想要的

您可以通过在DOM中操作select控件来实现。您需要做的是为select控件创建一个“包装器”。控件本身将隐藏在页面上。包装器将是一个带有输入字段的div和一个向下箭头，该箭头将显示一个类似于div的下拉列表，其中包含当前选定的项目。当用户输入新项时，您可以将其添加到隐藏的选择控件中。当他们删除它时，您也会从隐藏的选择中删除它。这基本上是一般的想法。

您可以通过在DOM中操作select控件来实现这一点。您需要做的是为select控件创建一个“包装器”。控件本身将隐藏在页面上。包装器将是一个带有输入字段的div和一个向下箭头，该箭头将显示一个类似于div的下拉列表，其中包含当前选定的项目。当用户输入新项时，您可以将其添加到隐藏的选择控件中。当他们删除它时，您也会从隐藏的选择中删除它。这基本上就是总体思路。

HTML:

<form id="input_text">
    <input id="add_text" type="text">
</form>
<div id="results"></div>

文档就绪时的JavaScript：

var addText = $("#add_text");
var results = $("#results");

$(".remover").live("click", function() {
    $(this).parent("div").remove();
    return false;
});

$("#input_text").submit(function() {
    var newText = $.trim(addText.val());
    if (newText) {
        results.append('<div><a href="#" class="remover">x</a> ' + newText + '</div>');
    }
    addText.val("").focus();
    return false;
});

完整解决方案：

HTML：

<form id="input_text">
    <input id="add_text" type="text">
</form>
<div id="results"></div>

文档就绪时的JavaScript：

var addText = $("#add_text");
var results = $("#results");

$(".remover").live("click", function() {
    $(this).parent("div").remove();
    return false;
});

$("#input_text").submit(function() {
    var newText = $.trim(addText.val());
    if (newText) {
        results.append('<div><a href="#" class="remover">x</a> ' + newText + '</div>');
    }
    addText.val("").focus();
    return false;
});

完整解决方案：

---

这不需要jquery插件，你可以用jquery来做，应该很简单。这不需要jquery插件，你可以用jquery来做，应该很简单。我想用JSFIDLE来写，但放弃了，只是给了他一些伪代码…+1作为你的解决方案很好的例子，我想用JSFIDLE编写，但放弃了，只给了他一些psuedo代码…+1作为您的解决方案