Множественный контроль выбора 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

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

Answer 3

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