Champ de formulaire clair après sélection pour jQuery UI Autocomplete

Question

Je suis l'élaboration d'une forme, et l'utilisation de jQuery UI Autocomplete. Lorsque l'utilisateur sélectionne une option, je veux la sélection de la pop dans un laps annexé à la société mère <p> balise. Ensuite, je veux le champ clair, plutôt que d'être rempli avec la sélection.

J'ai l'span apparaissant très bien, mais je ne peux pas obtenir le champ clair.

Comment annuler jQuery UI Autocomplete par défaut sélectionnez l'action?

Voici mon code:

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Simplement en faisant $(this).val(""); ne fonctionne pas. Ce qui est affolant, c'est que presque la fonction exacte fonctionne très bien si j'ignore la saisie semi-automatique, et il suffit de prendre action lorsque l'utilisateur tape une virgule en tant que tel:

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

Le vrai résultat final est d'obtenir la saisie semi-automatique de travailler avec les sélections multiples. Si quelqu'un a des suggestions pour qu'ils seraient les bienvenus.

Answer 1

Ajouter à la fin de votre fonction pour effacer le champ et annuler l’événement  :)

Ceci empêchera la valeur mise à jour. Vous pouvez voir comment il fonctionne autour de la ligne 109 ici.

Le code là vérifie spécifiquement pour false :

Answer 2

Au lieu de retourner la valeur false que vous pourriez également utiliser Event.preventDefault ().

Answer 3

retourner false est nécessaire dans le rappel de sélectionner, de vider le champ. Mais si vous voulez contrôler à nouveau le champ, c'est-à-dire la valeur, vous devez appeler une fonction nouvelle pour sortir de l’interface utilisateur.

Peut-être vous avez une valeur prompt tels que :

Définissez-le comme valeurs de l’élément (sur focus nous définissons sur '').

Answer 4

Il fonctionne bien pour moi.

Après l’événement select, j’ai utilisé le changement de l’événement.

Je suis un débutant !