複数選択コントロール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 
}); 

のための1つのより多くのクリックイベントを持っています

私は擬似コードのようなものを与えました。これはあなたが望むものでなければなりません。

Answer 3

DOMの選択コントロールを操作することでこれを行うことができます。あなたがしなければならないのは、選択コントロールのための「ラッパー」を作成することです。コントロール自体はページ上に表示されません。ラッパーは、入力フィールドと下向き矢印を持つdivになります。これは、現在選択されている項目とドロップダウンのようなdivを表示します。ユーザーが新しい項目を入力すると、隠しセレクトコントロールに追加されます。削除すると、非表示の選択からも削除されます。それは基本的な考え方です。