Comment les suggestions de recherche/recherche en direct peuvent-elles être implémentées en utilisant Dojo?

Question

Je souhaite implémenter une fonctionnalité de recherche en direct ou de recherche dans une application Web utilisant Dojo Framework. Ce serait similaire à la façon dont les recherches Google et Bing affichent les correspondances au fur et à mesure que vous tapez: lorsque vous tapez dans la zone de recherche, une liste de correspondances potentielles apparaît ci-dessous. Les recherches seraient effectuées côté serveur, avec les résultats renvoyés au navigateur en utilisant AJAX.

Est-ce que quelqu'un connaît un bon moyen d'implémenter cela en utilisant Dojo?

Voici quelques options possibles:

• Le intégré widget de dijit.form.ComboBox
  Cela a des fonctionnalités très similaires, mais je ne l'ai vu utilisé avec des ensembles de données limitées. Les exemples utilisent toujours de petites listes (telles que les 50 états des États-Unis) et préchargent l'intégralité de l'ensemble de données pour le filtrage côté client. Cependant je suppose que je pourrais l'accrocher à un dojox.data.JsonQueryRestStore pour la recherche côté serveur - quelqu'un peut-il confirmer si cela fonctionne?

• QueryBox http://marumushi.com/code/querybox/
  Cette implémentation fait principalement le travail, mais il a quelques bugs mineurs et ne regarde pas comme il est maintenu. Je devrais faire quelques corrections de bugs sur le code avant de l'utiliser.

• Medryx http://blog.medryx.org/2008/09/10/dijitsearch-part-2/
  Cela ressemble aussi il fait le travail, mais il est décrit comme code « niveau alpha » et le lien vers le code semble être rompu ...

Je pourrais probablement faire l'un des travaux ci-dessus, mais j'aimerais savoir s'il existe de meilleures alternatives.

Answer 1

Je mis en œuvre il y a 5 ans quand Dojo était à 0,2:

• http://www.lazutkin.com/blog/2005/12/23/live-filtering/

Alors que le code est ancien, il est trivial, et nous espérons qu'il va vous donner des idées sur la façon de l'attaquer. L'esquisse:

• Joindre un gestionnaire d'événement à votre boîte d'entrée, qui est déclenché sur les changements — utilisation « onkeyup » pour détecter un changement dans la zone de saisie.
• Attendez que l'utilisateur arrête de taper en réglant une minuterie dans votre gestionnaire d'événements, s'il n'est pas encore défini. 200-500ms sont de bons temps d'attente.
  • Le délai d'attente joue un double rôle:
    • Il étrangle nos requêtes à un serveur pour éviter la surcharge.
    • Il joue sur notre perception du temps et de nos habitudes de frappe.
• Si notre délai d'attente est écoulé, et nous ne pas attendre un serveur ⇒ envoyer au serveur une chaîne que nous avons jusqu'à présent.
• Si nous attendons toujours un serveur, annulez la demande et demandez à nouveau.
  • Cette partie est spécifique à l'application: nous ne voulons pas surcharger un serveur, et parfois un serveur ne peut pas gérer correctement les connexions erronées.
  • Dans l'exemple, je n'annule pas l'appel XHR, mais j'attends qu'il finisse avant de soumettre une nouvelle requête.
• Le serveur répond avec des résultats pertinents, qui sont affichés rapidement.

Dans l'article du blog je l'ai implémenté comme un widget. Évidemment, l'emballage exact est à vous.