jQuery Autocomplete mon détourne touches haut et bas, même lorsque saisie semi-automatique ne se déclenche pas

Question

Nous utilisons le plugin jquery.autocomplete pour aider les noms d'utilisateur sur un client autocomplete twitter. Chaque fois que l'utilisateur tape le symbole @, le script est déclenché pour aider à compléter le nom d'utilisateur désiré.

Le problème est que, même lorsque le symbole @ n'a pas été entré du tout, les touches fléchées HAUT et BAS (utilisées pour naviguer dans la liste des noms d'utilisateur potentiels une fois que le script drop est appelé) ne fonctionnent pas du tout . Donc, si un utilisateur tape un long tweet et tente d'utiliser les touches HAUT et BAS pour déplacer le curseur sur le texte, rien ne se passe. l'utilisateur doit alors utiliser les touches GAUCHE et DROITE pour se déplacer dans le texte. Cela ne se produit pas avec ESC ou RETURN, qui sont également utilisés par le script. Seulement UP et DOWN.

Une idée de ce qui pourrait causer cela?

Answer 1

Après avoir joué avec le plug-in sur le mien, je suis venu avec un simple tweak où il vérifie si la liste des résultats montre avant qu'il les flèches vers le haut détourne/BAS. J'ai a fork of the fixed plugin on github, et depuis j'ai ajouté quelques fonctionnalités minuscules, corrections de bugs et mises à jour. Bien que le plugin soit obsolète, il fonctionne toujours sur la dernière version de jQuery, et j'ai l'intention de continuer à le maintenir (sans toutefois contribuer trop activement à des fonctionnalités supplémentaires) pour le moment. Si, pour une raison quelconque, vous rencontrez des problèmes avec la solution d'interface utilisateur jQuery, essayez le plugin mis à jour.

Answer 2

Vous avez raison bien sûr, et la lecture du code fait assez clairement ce qui se passe:

case keyCode.UP: 
    self._move("previous", event); 
    // prevent moving cursor to beginning of text field in some browsers 
    event.preventDefault(); 
    break; 
case keyCode.DOWN: 
    self._move("next", event); 
    // prevent moving cursor to end of text field in some browsers 
    event.preventDefault(); 
    break; 

Le problème est qu'ils devraient vraiment empêcherions que par défaut si l'utilisateur navigue dans le menu (qui est, si le menu est en fait ouvert). Je piraté ce en se liant à "keydown" plus tôt que autocomplete et écrasez preventDefault avec function(){}, mais seulement si le menu est ouvert ... vous pouvez l'essayer.

(De plus, on pourrait souhaiter un peu plus des commentaires descriptifs dans ce code très lu).

Mise à jour: *

Voici le code réel je, plus ou moins; supposons "#field" est le champ avec autocomplete mis en place sur elle. Notez la manière géniale de vérifier si le menu est visible; c'est parce que cela donne menu.active genre de comportement étrange (le menu est actif uniquement lorsqu'un élément est en fait concentré). Essayez-le si vous le souhaitez.

$('#field').keydown(function(e){ 
    if(e.keyCode == $.ui.keyCode.UP || e.keyCode == $.ui.keyCode.DOWN){ 
     if(!$(this).data('autocomplete').widget().is(':visible')){ 
      e.preventDefaultForReal = e.preventDefault; 
      e.preventDefault = function(){}; 
     } 
    } 
});