web-dev-qa-db-fra.com

JQuery UI autocomplete - Masquer la liste après avoir appuyé sur Entrée

J'ai une entrée J'utilise l'auto-complétion de l'interface utilisateur Jquery pour proposer des suggestions à l'utilisateur. Permet à l'image que j'ai dans ma liste 3 articles: item1, item2, item3. Ce que je recherche, c'est la liste à fermer lorsque l'utilisateur clique sur Entrée. Par exemple, si l'utilisateur n'entre que "it", les 3 éléments seront affichés. Dans ce cas, s'il frappe, je souhaite que la liste soit fermée. Je n'arrive pas à trouver une solution à cela. J'espère que quelqu'un peut aider. À votre santé. Marc.

http://jsfiddle.net/vXMDR/

Mon html:

<input id="search" type="input" />​

Mon js:

$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
        });
});​
jqueryjquery-ui-autocomplete
19
Marc
$(function() {

    var availableTags = [
            "item1","item2","item3"
        ];

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
    }).keyup(function (e) {
        if(e.which === 13) {
            $(".ui-menu-item").hide();
        }            
    });
});​

http://jsfiddle.net/vXMDR/2/

22
karim79

Voici la solution: http://jsfiddle.net/vXMDR/3/

Faites moi savoir si vous avez des questions.

La magie lie la méthode de fermeture automatique à la saisie au clavier

 $("#search").keypress(function(e){ 
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
      return false;
    }
  });

METTRE &AGRAVE; JOUR

$("#search").keypress(function(e){ lie la touche de l'élément #search à la fonction spécifiée en passant à l'objet event. Vous pouvez aussi écrire ceci comme $("#search").on('keypress', function(e) {...

if (!e) e = window.event; s'assure que, si aucun événement valide n'a été transmis, il définit e sur l'objet window.event actuel.

Enfin, if (e.keyCode == '13'){ teste que la valeur du code d'activation de l'événement est égale à la touche "entrée". Pour une liste des codes de clé valides, voir ici .

Voici la documentation relative à la méthode de fermeture automatique - http://docs.jquery.com/UI/Autocomplete#method-close

23
shanabus

J'ai encore modifié la solution shanabus pour tenir compte du délai dû au rappel.

http://jsfiddle.net/vXMDR/46/

C'est un hack simple pour stocker si afficher ou non la complétion automatique en tant que booléen. (J'utilise setTimeOut pour créer le scénario où il y a une attente, c'est le scénario du problème et non la solution.)

shouldComplete = true;

$("#search").autocomplete({
    source:function (request, response) {            
        setTimeout(
            function() {
                response(shouldComplete ? availableTags : null);
            },
            2000);
    }        
    ,
    minLength: 0
    });

Ensuite, lorsque vous appuyez sur le bouton Entrée, le drapeau est défini sur false. Toute autre clé réactive le drapeau.

$("#search").keypress(function(e){
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
        shouldComplete = false;
      return false;
    }
        else
        {
            shouldComplete = true;
        }
  });

Je suis sûr qu'il est possible de le faire avec plus d'élégance, mais cela résout le problème que le menu déroulant pourrait apparaître ultérieurement.

0
Martin Capodici