Mehrfachauswahlsteuerung jQuery UI

Question

Ich habe eine Eingabe in einer HTML-Seite ausgeführt. Ich benutze jQuery UI.Ich möchte, dass der Benutzer etwas Text in die Eingabe eingibt, und sobald er Enter drückt, wird die Eingabe leer und der Text, den er eingegeben hat, erscheint unten, mit einem X daneben. Auf diese Weise kann der Benutzer viele Optionen eingeben und dann alle entfernen, indem er auf die entsprechende X-Schaltfläche klickt. Ich füge eine Darstellung von dem, was ich erreichen möchte:

Gibt es eine jQuery UI-Steuerelement, das mir dies erreichen helfen kann? Wenn nicht, wie würdest du es sonst tun?

Danke!

Answer 1

HTML:

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

JavaScript (auf Dokument 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; 
}); 

Voll Lösung: http://jsfiddle.net/QduEQ/

Answer 2

Ich kann Ihnen eine Idee geben, wie Sie das tun, wenn Sie mit jQuery einverstanden sind.

1) Erstellen Sie ein Formular mit einem Eingabefeld.

2) ein Formular Klick-Ereignis erstellen // flase Rückkehr ist nicht die Form, um das Bild,

$('#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) Geben Sie einen Klassennamen und Click-Ereignis ein für Bild vorlegen müssen

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

Ich gab psuedo code Art von Sachen, das sollte ziemlich viel, was Sie wollen

Answer 3

Sie könnten dies tun, indem Sie ein Select-Steuerelement in DOM manipulieren. Was Sie tun müssten, ist einen Wrapper für das Select-Steuerelement zu erstellen. Das Steuerelement selbst wird auf der Seite ausgeblendet. Der Wrapper wird ein Div mit dem Eingabefeld und ein Abwärtspfeil sein, der ein Drop-Down-ähnliches Div mit den aktuell ausgewählten Items anzeigen würde. Wenn ein Benutzer ein neues Element eingibt, fügen Sie es Ihrem ausgeblendeten Auswahlsteuerelement hinzu. Wenn sie es löschen, löschen Sie es auch aus der ausgeblendeten Auswahl. Das ist im Grunde die allgemeine Idee.