champ de formulaire Effacer après pour sélectionner jQuery UI Autocomplete

Question

Je développe une forme, et en utilisant jQuery UI Autocomplete. Lorsque l'utilisateur sélectionne une option, je veux la sélection pour faire apparaître dans une période jointe à la balise <p> mère. Ensuite, je veux que le champ clair plutôt que d'être renseigné avec la sélection.

J'ai la durée qui apparaît très bien, mais je ne peux pas obtenir le champ à effacer.

Comment avez-vous annulez par défaut de jQuery UI Autocomplete 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>");
    }
});

Il suffit de faire $(this).val(""); ne fonctionne pas. Ce qui est affolant est que presque la fonction exacte fonctionne très bien si j'ignore autocomplete, et juste prendre des mesures lorsque l'utilisateur tape une virgule comme par exemple:

$('[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 d'obtenir autocomplete de travailler avec plusieurs sélections. Si quelqu'un a des suggestions pour cela, ils seraient les bienvenus.

Answer 1

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

Cela permettra d'éviter la valeur de mise à jour. Vous pouvez voir comment cela fonctionne autour de la ligne 109 ici .

Le code là contrôles pour faux spécifiquement:

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

Answer 2

Au lieu de fausse déclaration, 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();
}

Answer 3

return false est nécessaire dans le rappel de sélection, de vider le champ. mais si vous souhaitez contrôler à nouveau le champ, à savoir définir la valeur, vous devez appeler une nouvelle fonction pour sortir de l'interface.

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

var promptText = "Enter a grocery item here."

Définir comme val de l'élément. (Sur l'accent que nous mettons à « »).

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

Answer 4

Il fonctionne bien pour moi.

Après événement select, j'utilisé le changement d'événement.

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

Je suis un débutant!

Answer 5

  

Essayez ceci

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

Answer 6

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

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