Liste déroulante de saisie semi-automatique avec Linkbuttons - ou "AJAX devenu sauvage"

Question

Ok, donc je veux une liste déroulante de saisie semi-automatique avec des boutons de lien comme sélections.Ainsi, l'utilisateur place le curseur dans la « zone de texte » et se voit proposer une liste d'options.Ils peuvent soit commencer à taper pour affiner la liste, soit sélectionner l’une des options de la liste.Dès qu'ils cliquent (ou appuient sur Entrée), l'ensemble de données auquel il est lié sera filtré par la sélection.

Ok, est-ce aussi simple que d'enrouler une saisie semi-automatique AJAX autour d'une liste déroulante ?Non?(S'il te plaît?)

Answer 1

Ce widget peut être réalisé avec trois éléments :une saisie de texte, une saisie par bouton et une liste non ordonnée pour contenir les résultats.

 __________  _
|__________||v|__             <-- text and button
  |              |            <-- ul (styled to appear relative to text input)
  |              |
  |              |
  |______________|

ul affiché sur :

• Evénement 'keyUp' de la saisie de texte (si la valeur n'est pas vide)
• Événement 'clic' de l'entrée du bouton (s'il n'est actuellement pas visible)

ul caché sur :

• Événement 'clic' de la saisie du bouton (si actuellement visible)
• événement 'clic' des éléments de la liste

Lorsque l'ul est affiché ou que l'événement 'keyUp' de la saisie de texte est déclenché, un appel AJAX au serveur doit être effectué pour mettre à jour la liste.

En cas de succès, les résultats doivent être placés dans l'ul.Lors de la création des éléments de la liste, un événement « clic » doit leur être attaché qui définit la valeur de saisie du texte et masque l'ul (il faudra peut-être ajouter un lien à l'intérieur du li pour y attacher l'événement).

Le plus dur c'est vraiment le CSS.Le JavaScript est simple, surtout avec une bibliothèque solide comme un prototype qui prend en charge plusieurs navigateurs.

Vous souhaiterez probablement prendre en charge certains identifiants pour les éléments, vous pouvez donc ajouter des entrées masquées à chaque élément de la liste avec l'identifiant et à côté de l'entrée de texte pour stocker l'ID des éléments sélectionnés.

Answer 2

Vous devrez gérer l'événement OnSelectedIndexChanged de votre liste déroulante pour relier votre ensemble de données en fonction de la sélection des utilisateurs.Si vous souhaitez que le filtrage se produise dans une publication asynchrone, enveloppez l'ensemble de données (ou la grille de données, je suppose) et votre liste déroulante dans un UpdatePanel.C'est une façon de procéder de toute façon.

Answer 3

Je ne suis pas entièrement sûr de ce que vous voulez, mais le Ra-Ajax Compléteur automatique a certainement un soutien pour avoir des « contrôles » en lui-même.Vous pouvez le voir dans le champ de recherche à l'adresse Empilé en fait (coin supérieur droit) où nous utilisons des liens.Mais cela pourrait aussi être des LinkButtons si vous le souhaitez...

Clause de non-responsabilité;Je travaille avec Ra-Ajax...

Answer 4

À mon avis, vous ne devriez pas du tout utiliser AJAX pour cela.

Voici pourquoi:

(1) Au point :TOUTES les options qu'il peut sélectionner sont affichées dans la liste déroulante.Cela signifie que toutes les options possibles sont déjà envoyées au client.

(2) Si l'utilisateur saisit quelque chose, le nombre d'entrées dans la liste déroulante est filtré pour correspondre.Cela peut facilement être fait du côté client.Être ajax'y et revenir au serveur à ce stade ne fera que ralentir les choses.

phpguru.org a un contrôle qui correspond « presque exactement » à ce dont vous avez besoin :

http://www.phpguru.org/static/AutoComplete.html#demo

Il diffère légèrement de ce dont vous avez besoin dans la mesure où il affiche la liste déroulante lors d'un double-clic au lieu de la mise au point.Cela devrait être assez facile à modifier.

J'espère que ça aide.