JQuery UI autocomplete - Masquer la liste après hiting entrer

J'ai une entrée. J'utilise le Jquery UI autocomplete proposer des suggestions pour l'utilisateur. Permet image que j'ai dans ma liste de 3 éléments: item1, item2, item3. Ce que je cherche, c'est la liste de fermeture lorsque l'utilisateur appuie sur entrée. Par exemple, si l'utilisateur n'entre dans "il", tous les 3 éléments seront affichés. Dans ce cas, si il frappe entrer, je tiens la liste à être fermé. Je n'arrive pas à comue une solution pour que. J'espère que quelqu'un peut vous aider. Des acclamations. Marc.

http://jsfiddle.net/vXMDR/

Mon code html:

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

Mon js:

$(function() {

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

    $("#search").autocomplete({
        source:availableTags,
        minLength: 0
        });
});

InformationsquelleAutor Marc | 2012-03-07

jquery jquery-ui-autocomplete

23
```
$(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/
- Dans mon cas réel scénario, j'ai déjà un événement keyup que les filtres d'un tableau sur ma page. Cette solution sera en conflit, je suppose... qu'est-Ce que le e dans le parenthisis?
- Hmm, je ne suis pas sûr pourquoi vous cacher l'élément au lieu de simplement appeler l'explicite close de la méthode docs.jquery.com/UI/Autocomplete#method-close
- OHHHHH ! - Je l'obtenir! e est le code de la clé... 13 est le code de la touche entrée... est ma compréhension correcte?
- Oui, exactement. Désolé de ne pas répondre plus tôt. Personnellement, je préfère utiliser les close méthode comme par @shanabus réponse.
- C'est ce que j'ai fait déjà. Merci à vous deux...
- Notez que ce code ne cacher les éléments de la liste de saisie semi-automatique, mais pas de masquer la liste elle-même. Voir @shanabus pour une meilleure méthode.
- Ça se complique pas de travail si vous frappez avant d'entrer la liste est chargé. Par exemple, si à l'aide de l'API google maps peut prendre 2 secondes pour charger la liste. Entrez "New York" et appuyez sur entrée tout de suite, la liste est chargé après avoir caché ça.
- Note de côté pour ça, pas sûr si son dû à une version plus récente de Jquery-UI mais j'ai dû faire ce que $(".ui-helper-hidden-accessible").hide(); comme c'était un div à l'intérieur .ui-helper-hidden-accessible
InformationsquelleAutor karim79
24

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

Laissez-moi savoir si vous avez des questions.

La magie est la liaison la saisie semi-automatique mode de fermeture à pression de touche
```
 $("#search").keypress(function(e){ 
    if (!e) e = window.event;   
    if (e.keyCode == '13'){
      $('#search').autocomplete('close');
      return false;
    }
  });
```
Mise à JOUR

$("#search").keypress(function(e){ lie keypress de la #recherche de l'élément de la fonction spécifiée, en passant dans le event objet. Vous pouvez également écrire ce que $("#search").on('keypress', function(e) {...

if (!e) e = window.event; garantit que si un événement valide n'a pas été transmis, il définit e à la fenêtre en cours.objet de l'événement.

Enfin, if (e.keyCode == '13'){ tests événement keycode valeur est égale à la touche "enter". Pour une liste des touches valides, voir ici.

Voici la documentation de la saisie semi-automatique méthode close - http://docs.jquery.com/UI/Autocomplete#method-close
- Bien Sûr @Marc. Je vais mettre à jour la réponse avec les commentaires
- Pas besoin je l'ai eu. Merci beaucoup d'avoir aidé....
- Ok, mais être prudent avec la accepté de répondre, hide() éléments n'est pas la même ni documentés de la fermeture de la fonctionnalité saisie semi-automatique.
- Notez que si c'est un formulaire qui doit être soumis, il est préférable de l'utiliser comme un rappel pour l'événement submit du formulaire. $('#search').autocomplete({foo: bar}).closest('form').submit(function () { $('#search').autocomplete('close'); })
- Comme karim79 la solution, ça se complique pas de travail si vous frappez avant d'entrer la liste est chargé. Par exemple, si à l'aide de l'API google maps peut prendre 2 secondes pour charger la liste. Entrez "New York" et appuyez sur entrée tout de suite, la liste est chargé après avoir caché ça.
InformationsquelleAutor shanabus

J'ai modifié le shanabus solution en outre, pour permettre le temps de retard en raison de la fonction de rappel.

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

C'est un simple hack pour stocker de savoir si ou de ne pas afficher la saisie semi-automatique comme une valeur booléenne. (Je suis en utilisant setTimeOut pour créer le scénario où il y a une attente, c'est le scénario de problème, pas la solution.)

shouldComplete = true;

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

Puis lorsque la touche entrée est pressée le drapeau est réglé sur faux. N'importe quelle autre touche 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;
        }
  });

Il est possible de le faire de manière plus élégante, j'en suis sûr, mais ce n'résoudre le problème de la liste déroulante, peuvent apparaître plus tard.

InformationsquelleAutor Martin Capodici

-1

Je suis tombé sur cette question et n'a pas été en mesure d'utiliser la méthode close() parce que ma saisie semi-automatique est en cours de re-rendus sur chaque charge de l'épine Dorsale de la vue. En tant que tel, une nouvelle saisie semi-automatique de l'élément a été ajouté au DOM et ceux qui sont coincés autour de même si le joint d'entrée de l'élément a été soufflé loin et recréé. Inutile de saisie semi-automatique d'éléments étaient à l'origine de quelques problèmes, mais le pire est quand l'utilisateur appuie sur entrée assez rapidement, je voudrais aller à travers cette séquence:
1. Utilisateur tape un texte
2. Demande de suggestions commence l'exécution
3. L'événement keypress est déclenchée et exécute une recherche en plein texte (l'utilisateur n'a pas choisi quelque chose de saisie semi-automatique)
4. Le point de vue de la recharge, le champ de saisie et d'autres éléments sont à nouveau rendus et une nouvelle saisie semi-automatique de l'élément est ajouté à la fin de la DOM
5. L'original de la demande de suggestions renvoie une réponse et les suggestions sont affichées.
Noter que les suggestions affiché à l'étape 5 sont désormais liée à une saisie semi-automatique conteneur qui n'est plus associé à mon champ de saisie, de sorte que tous les événements comme appuyer sur esc ou en cliquant ailleurs sur l'écran, ne fait rien. Les suggestions sont coincé là jusqu'à ce qu'un rechargement complet de la page qui apparaît.

J'ai fini par résoudre cela par le stockage de la mainContainerId de la plus récente saisie semi-automatique de l'élément et de l'enlever manuellement.
```
//during rendering
self.currentAutoComplete = $("#input-element").autocomplete({
  //set options
});

//later
if (this.currentAutoComplete) {
  $("#" + this.currentAutoComplete.mainContainerId).remove();
}
```
InformationsquelleAutor Sean

Vous devez vous connecter pour publier un commentaire.