web-dev-qa-db-fra.com

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

Je développe un formulaire et j'utilise la fonction de saisie semi-automatique de jQuery UI. Lorsque l'utilisateur sélectionne une option, je souhaite que la sélection apparaisse dans une étendue ajoutée à la balise <p> parent. Ensuite, je veux que le champ se vide plutôt que d'être rempli avec la sélection. 

La durée semble bien aller, 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 $(this).val(""); ne fonctionne pas. Ce qui est exaspérant, c’est que presque la fonction exacte fonctionne correctement si j’ignore la saisie semi-automatique et ne prend que 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 résultat final réel est de permettre à la saisie semi-automatique de fonctionner avec plusieurs sélections. Si quelqu'un a des suggestions à cet égard, il serait le bienvenu.

jqueryjquery-uijquery-ui-autocomplete
87
Jon F Hancock

Ajoutez $(this).val(''); return false; à la fin de votre fonction select 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 qu'il contient vérifie faux en particulier:

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

Au lieu de retourner 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();
}
19
user1128713

return false est nécessaire dans le rappel sélectionné pour vider le champ. mais si vous souhaitez contrôler à nouveau 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 val de l'élément. (sur focus nous avons mis sur ''). 

$("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
}
6
captahab

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! 

4
Silvana Saly Viana

Essaye ça

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

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

$('#select_id').blur();
printResult();
0
Mireia Gimeno