Управление множественным выбором jQuery UI

Question

У меня есть ввод на HTML-странице. Я использую jQuery UI. Я хочу, чтобы пользователь вводил какой-то текст во ввод, а затем, как только он нажмет Enter, ввод станет пустым, а введенный текст появится ниже, с X рядом с ним. Это позволит пользователю ввести много параметров, а затем удалить любой из них, нажав на соответствующую кнопку X. Я прилагаю иллюстрацию того, чего я хочу достичь:

Существует ли элемент управления jQuery UI, который может помочь мне достичь этого? Если нет, то как еще вы это сделаете?

Спасибо!

Answer 1

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

Полное решение: http://jsfiddle.net/QduEQ/

Answer 2

Вы можете сделать это, манипулируя элементом управления select в DOM. Что вам нужно сделать, это создать «обертку» для элемента управления select. Сам элемент управления будет скрыт на странице. Оболочкой будет div с полем ввода и стрелкой вниз, которая будет отображать div-подобный элемент с текущими выбранными элементами. Когда пользователь вводит новый элемент, вы добавляете его в скрытый элемент управления select. Когда они удаляют его, вы также удаляете его из скрытого выбора. Это в основном общая идея.

Answer 3

Я могу дать представление, как это сделать, если вы в порядке с 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-код такого рода вещи, это должно быть почти то, что вы хотите