Effacer le champ du formulaire après la sélection pour la saisie semi-automatique de l'interface utilisateur jQuery

Je développe un formulaire et j'utilise jQuery UI Autocomplete. Lorsque l'utilisateur sélectionne une option, je souhaite que la sélection apparaisse dans une plage ajoutée à la <p>balise parent . Ensuite, je veux que le champ soit effacé plutôt que rempli avec la sélection.

J'ai le span qui semble très bien, mais je ne parviens pas à dégager le champ.

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

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

Faire simplement ne $(this).val("");fonctionne pas. Ce qui est exaspérant, c'est que presque la fonction exacte fonctionne bien si j'ignore la saisie semi-automatique et que je prends simplement des mesures lorsque l'utilisateur tape une virgule en tant que telle:

$('[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 véritable résultat final est d'obtenir la saisie semi-automatique pour travailler avec plusieurs sélections. Si quelqu'un a des suggestions à ce sujet, il sera le bienvenu.

Ajoutez $(this).val(''); return false; à la fin de votre selectfonction pour effacer le champ et annuler l'événement :)

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

Le code qui s'y trouve vérifie spécifiquement faux:

if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}

Au lieu de renvoyer false, vous pouvez également utiliser event.preventDefault ().

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

return false est nécessaire dans le callback select, pour vider le champ. mais si vous voulez à nouveau contrôler le champ, c'est-à-dire définir la valeur, vous devez appeler une nouvelle fonction pour sortir de l'interface utilisateur.

Peut-être avez-vous une valeur d'invite telle que:

var promptText = "Enter a grocery item here."

Définissez-le comme valeur de l'élément. (sur focus, nous nous sommes mis à '').

$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}

Cela fonctionne bien pour moi.

Après avoir sélectionné l'événement, j'ai utilisé le changement d'événement.

 change:function(event){
   $("#selector").val("");  
   return false;
 }

Je suis un débutant!

Essaye ça

select: function (event, ui) {
    $(this).val('');
    return false;       
}

Je viens de le résoudre en forçant à perdre la concentration:

$('#select_id').blur();
printResult();