Contrôle de sélection multiple jQuery UI

Question

J'ai une entrée s'exécutant dans une page HTML. J'utilise jQuery UI.Je veux que l'utilisateur tape du texte dans l'entrée, et puis une fois qu'il va appuyer sur Entrée, l'entrée deviendra vide et le texte qu'il a entré apparaîtra ci-dessous, avec un X à côté de lui. Cela permettra à l'utilisateur d'entrer de nombreuses options, puis de les supprimer en cliquant sur le bouton X correspondant. Je joins une illustration de ce que je veux atteindre:

Y at-il un contrôle jQuery UI qui peut me aider à atteindre cet objectif? Si non, comment le feriez-vous autrement?

Merci!

Answer 1

HTML:

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

JavaScript (sur document prêt):

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

Solution complète: http://jsfiddle.net/QduEQ/

Answer 2

Je peux donner une idée de la façon de procéder si vous êtes d'accord avec jquery.

1) Créer un formulaire avec une zone de saisie.

2) créer un événement click formulaire // retour flase est de ne pas soumettre le formulaire

$('#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) Donnez un nom de classe à l'image, et d'avoir un événement plus cliquez pour l'image

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

J'ai donné le code psuedo genre de choses, cela devrait à peu près ce que vous voulez

Answer 3

Vous pouvez le faire en manipulant un contrôle de sélection dans DOM. Ce que vous devez faire est de créer un 'wrapper' pour le contrôle select. Le contrôle lui-même sera caché sur la page. Le wrapper sera un div avec le champ de saisie et une flèche vers le bas qui montrerait un div déroulant avec vos éléments sélectionnés en cours. Lorsqu'un utilisateur entre un nouvel élément, vous l'ajoutez à votre contrôle de sélection caché. Quand ils le suppriment, vous le supprimez également de la sélection cachée. C'est essentiellement l'idée générale.