Multiple selection control jQuery UI

I have an input running in an HTML page. I'm using jQuery UI.I want the user to type some text in the input, and then once he will press Enter, the input will become empty and the text he had entered will appear bellow, with an X next to it. This will allow the user to enter many options, and t开发者_运维百科hen remove any of them by clicking on the respective X button. I'm attaching an illustration of what I want to achieve:

Is there a jQuery UI control that can help me achieve this? If not, how else would you do it?

Thanks!

HTML:

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

JavaScript (on document ready):

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

Full solution: http://jsfiddle.net/QduEQ/

I can give a idea how to do this if you are ok with jquery.

1) Create a form with a input box.

2) create a form click event // return flase is not to submit the form

$('#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) Give a class name to the image , and have one more click event for image

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

I gave psuedo code kind of stuff , this should pretty much what you want

You could do this by manipulating a select control in DOM. What you'd have to do is create a 'wrapper' for the select control. The control itself will be hidden on the page. The wrapper will be a div with the input field and a down arrow which would show a drop-down-like div with your current selected items. When a user enters new item, you add it to your hidden select control. When they delete it, you also delete it from the hidden select. That's basically the general idea.