Autocomplete Dropdown mit Linkbuttons – oder „AJAX Gone Wild“

Question

Ok, ich möchte also ein Dropdown-Menü zur automatischen Vervollständigung mit Linkschaltflächen als Auswahlmöglichkeiten.Der Benutzer setzt den Cursor also in das „Textfeld“ und erhält eine Liste mit Optionen angezeigt.Sie können entweder mit der Eingabe beginnen, um die Liste einzugrenzen, oder eine der Optionen in der Liste auswählen.Sobald sie klicken (oder die Eingabetaste drücken), wird der Datensatz, mit dem dies verknüpft ist, durch die Auswahl gefiltert.

Ok, ist das so einfach wie das Umschließen einer Dropdown-Liste mit einer AJAX-Autovervollständigung?NEIN?(Bitte?)

Answer 1

Dieses Widget kann mit drei Elementen erstellt werden:eine Texteingabe, eine Schaltflächeneingabe und eine ungeordnete Liste zur Speicherung der Ergebnisse.

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

ul gezeigt auf:

• 'keyUp'-Ereignis der Texteingabe (wenn der Wert nicht leer ist)
• 'click'-Ereignis der Schaltflächeneingabe (falls derzeit nicht sichtbar)

ul versteckt auf:

• 'Klick'-Ereignis der Schaltflächeneingabe (sofern aktuell sichtbar)
• „Klick“-Ereignis von Listenelementen

Wenn die UL angezeigt wird oder das „keyUp“-Ereignis der Texteingabe ausgelöst wird, muss ein AJAX-Aufruf an den Server erfolgen, um die Liste zu aktualisieren.

Bei Erfolg sollten die Ergebnisse in der Ul.Beim Erstellen der Listenelemente sollte ihnen ein „Klick“-Ereignis angehängt sein, das den Texteingabewert festlegt und die UL verbirgt (möglicherweise muss innerhalb der LI ein Link hinzugefügt werden, an den das Ereignis angehängt werden soll).

Der schwierigste Teil ist wirklich das CSS.Das JavaScript ist einfach, insbesondere mit einem soliden bibliotheksähnlichen Prototyp, der mehrere Browser unterstützt.

Möglicherweise möchten Sie einige IDs für die Elemente unterstützen, sodass Sie zu jedem Listenelement einige versteckte Eingaben mit der ID und neben der Texteingabe hinzufügen können, um die ID des ausgewählten Elements zu speichern.

Answer 2

Sie müssen das OnSelectedIndexChanged-Ereignis Ihrer Dropdown-Liste verarbeiten, um Ihren Datensatz basierend auf der Benutzerauswahl neu zu binden.Wenn Sie möchten, dass die Filterung in einem asynchronen Postback erfolgt, schließen Sie den Datensatz (oder das Datagrid, nehme ich an) und Ihr Dropdown-Menü in ein UpdatePanel ein.Das ist sowieso eine Möglichkeit, es zu tun.

Answer 3

Ich bin mir nicht ganz sicher, was Sie wollen, aber den Ra-Ajax AutoCompleter Ich habe auf jeden Fall Unterstützung dafür, „Kontrollen“ in sich zu haben.Das können Sie im Suchfeld unter sehen Gestapelt in der Tat (obere rechte Ecke), wo wir Links verwenden.Auf Wunsch könnten dies aber auch LinkButtons sein...

Haftungsausschluss;Ich arbeite mit Ra-Ajax...

Answer 4

Meiner Meinung nach sollte man AJAX dafür überhaupt nicht verwenden.

hier ist der Grund:

(1) Im Fokus:ALLE Optionen, die er auswählen kann, werden im Dropdown-Menü angezeigt.Dies bedeutet, dass alle möglichen Optionen bereits an den Client gesendet werden.

(2) Wenn der Benutzer etwas eingibt, wird die Anzahl der Einträge im Dropdown-Menü entsprechend heruntergefiltert.Dies kann problemlos auf der Client-Seite durchgeführt werden.Ajax zu sein und zu diesem Zeitpunkt zum Server zurückzukehren, wird die Dinge nur verlangsamen.

phpguru.org verfügt über eine Steuerung, die „fast genau“ Ihren Anforderungen entspricht:

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

Es unterscheidet sich geringfügig von dem, was Sie benötigen, da es das Dropdown-Menü beim Doppelklick und nicht beim Fokussieren anzeigt.Das sollte ziemlich einfach zu ändern sein.

Ich hoffe das hilft.