[résolu] Autocomplete : utiliser le clavier pour naviguer

Bonjour,
J'avais quelques soucis pour appliquer le plugin autocomplete de jQuery-UI (d'ailleurs si quelqu'un connaissait un tuto francophone bien détaillé pour faire marcher ce truc, j'apprécierais)
J'ai donc fait moi-même un équivalent qui marche très bien : on tape dans un input et en-dessous apparait si résultat une div contenant une liste des résultats. On clique et paf, ça se met dans la case. Révolutionnaire.
Mon souci est que pour l'instant le seul moyen de sélectionner un résultat est la souris, et j'aimerais bien permettre l'utilisation du clavier (haut/bas/entrée). Je n'arrive toutefois pas à faire en sorte qu'à l'appui sur "bas" le focus aille sur le premier résultat de la liste, puis sur le second, etc, ou que l'appui sur entrée valide le choix.
Quelqu'un saurait-il quels événements je dois guetter et quelles actions enclencher pour passer dans la div de résultat et naviguer dans une liste ?
Merci.
Modifié par Mendoza (20 Sep 2011 - 15:33)

Je serais également bien intéressé, autant par ton premier code car moi j'ai toujours pas réussi à faire marcher le mien mais aussi par la solution de sélectionner avec le clavier.

Je vais tester aujourd'hui une méthode à laquelle j'ai réfléchi cette nuit mais qui me semble viable :
- initialiser une variable X à 0
- à chaque appui sur "bas", X augmente de 1
- à chaque appui sur "haut", X diminue de 1, avec 0 pour limite.
- sélectionner l'élément de la liste numéro X via la fonction eq().

Si ça marche je viendrai poster le résultat
Si quelqu'un a d'autres idées entre temps, ça m'intéresse aussi.

Hello.

Quel est ton souci avec l'autocomplete de Jquery UI? Dans la mesure ou c'est en général la simplicité même à mettre en place et théoriquement bien pensé en terme d'accessibilité (gestion des rôles Aria et navigation clavier entre autres), c'est un peu dommage de réinventer la roue (ovale) sur ce coup-là.

Je n'arrive pas à trouver une page francophone bien faite expliquant clairement comment le mettre en place : noms des inputs, paramètres d'appels au script php se connectant à ma BDD, format des données renvoyées, si il faut ou non créer à la main une div pour les résultats, et d'autres petits détails comme ça. D'autant plus que mon hébergeur sur ce site est Free et que sa version de PHP ne gère pas simplement les json, qui d'après ce que j'ai compris sont utilisés pour UI. Du coup, il y avait trop de sources possibles d'erreurs pour me permettre de comprendre pourquoi jQuery UI ne fonctionne pas sur mes pages (faut bien voir aussi que je débute dans tout ça et que certaines notions m'échappent encore).
Il m'a donc semblé aussi simple de faire moi-même un autocomplete que je contrôle entièrement.
Mais bon, si vous connaissez une page claire qui explique comment utiliser UI, c'est aussi bien

PS edit : perso réinventer la roue m'éclate particulièrement, façon énigme puzzle à résoudre et c'est toujours une joie quand je trouve une solution à un problème particulièrement pénible. Mais bon, je dois bien admettre que les codes que je produis au final sont à des années-lumières de ce qu'un pro pourrait faire en termes d'optimisation. Toutefois, je m'en sors presque toujours avec mes roues ovales, et finalement, je progresse ^^
Modifié par Mendoza (20 Sep 2011 - 13:21)

Mendoza a écrit :
Je n'arrive pas à trouver une page francophone bien faite expliquant clairement comment le mettre en place

Je dis ça, je dis rien. Sinon la doc officielle est très explicite.

Pour le JSON, tu peux au pire l'écrire à la main via PHP, le tout est de bien échapper les éventuels guillemets dans tes résultats et au pire vérifier le résultat avec JSONLint.
Modifié par Florian_R (20 Sep 2011 - 13:45)

Arf je dois mal chercher parce que même dans les résultats que tu me montres, je les trouve soit mal expliqués (notamment au niveau du script php à appeler), soit pas utiles, soit souffrant du même problème que mon propre script (pas de gestion du clavier).
Quoiqu'il en soit, j'ai réussi avec mon petit compteur et ça marche

Doc Jquery UI a écrit :
The callback gets two arguments:
A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".
A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties).

Donc tu créer un fichier PHP qui attend un paramètre term en GET, et tu renvoies un tableau en JSON contenant soit une suite de chaînes, soit une suite d'objet avec les clés label et value.

Pas franchement grand chose de compliqué.

Ah ah je suis une chèvre. Un stupide accent dans le retour en trop annihilait le processus. Dégouté. C'est typique, je perds un temps monstrueux à réfléchir à des causes possibles d'erreurs quand le problème est en fait tout bête.
Bon quoiqu'il en soit, maintenant ça marche que ce soit avec ma fonction ou l'autocomplete UI. Pour le principe, je garde quand même le mien, histoire de pouvoir dire que "c'est moi qui l'ai fait" ^^

Edit : mini-truc, si ça t'intéresse toujours, tu peux me contacter pour que je te file mon script.
Modifié par Mendoza (20 Sep 2011 - 15:34)