Ajax-Autocomplete (oder Auto-Suggest) mit TAB-Vervollständigung / AutoFill ähnlich wie Shell-Befehlszeilenabschluss?

7

Ich implementiere eine AJAX-Autocomplete / Autosuggest-Funktion und möchte nicht nur die üblichen Vorschläge für die Anzeige machen, die denen des Benutzers ähneln, sondern ich möchte dem Benutzer auch Teilkomplettierungen erlauben, um das Tippen zu ersparen .

Stellen Sie sich vor, dass mein Wörterbuch diese Werte enthält: "Grüner Apfel", "Grüne Birne", "Grüne Frucht", "Blauer Himmel", "Blaues Wasser", "Blaue Spur".

Wenn der Benutzer "g" eintippt, sollten die Vorschläge "grüner Apfel", "grüne Birne", "grüne Frucht" sein, und ich möchte den Benutzer TAB oder etwas, um seine Abfrage zu aktualisieren, auf " grün ", dann könnten sie" a "eingeben und sie würden zu" grünem Apfel "abgeschlossen.

Ich versuche, dies nach dem Abschluss der Linux-Shell-Befehlszeile zu modellieren.

Können Sie ein Steuerelement / Skript empfehlen, das dies tut? Oder eine Modifikation / Anpassung eines vorhandenen Controls?

    
Alex Black 03.12.2009, 04:04
quelle

3 Antworten

19

Dieser spezielle Typ der Autovervollständigung wird in gängigen Autovervollständigungs-Plugins (für jQuery, Scripty ...) nicht unterstützt, da diese normalerweise eine Dropdown-Benutzeroberfläche zur Auswahl der gewünschten Übereinstimmung bereitstellen.

Nehmen wir an, wir haben keine Standardlösung. Boo-ho. Wie schwer kann es sein, es zu codieren?

%Vor%

Testen Sie die Seite hier - sie sollte in normalen Browsern funktionieren. Um IE zu unterstützen, verwenden Sie Event-Listening von prototype.js, jQuery oder anderen.

    
mislav 13.12.2009, 19:36
quelle
3

Wenn Sie jQuery verwenden, ist ein großartiges Plugin Ссылка . Verwenden Sie einfach css, um die Dropdown-Box auszublenden, und lassen Sie die Funktion zum automatischen Vervollständigen von Tabs aktiviert.

Ich denke, es wäre einfach, ein jquery-Plugin für sich selbst zu machen ...

Entlang der Linien von       Achten Sie auf die Tabulatortaste       Wenn die Tabulatortaste gedrückt wird, triggert Tab: Drücken Sie auf input.autotab

%Vor%

Registerkarte bind.autotab: Drücken Sie das Ereignis (in jeder Schleife ... if focus == true usw.) entweder auf eine JavaScript-Array-Suche oder auf eine xhr-Anfrage (ajax), und setzen Sie den Wert dieser Eingabe auf Daten zurückgegeben.

%Vor%

Schreiben Sie es in Ihr Autosuggest-Skript, sobald der Wert mehr als einmal in der Datenbank gefunden wurde (verwenden Sie eine for-Schleife mit einem Index, halten Sie an dem Indexelement, wo das erste Element übereinstimmt), und geben Sie den Wert bis zurück dieser Punkt.

    
CodeJoust 09.12.2009 06:13
quelle
1

Der einfachste Weg wäre, einfach das jQuery- und das Autocomplete-Plugin zu verwenden. Wenn man den stackoverflow html betrachtet, scheint es, dass sie die gleichen Sachen benutzen. Scheint sehr gut für die meisten Browser zu funktionieren. Das Plugin hat auch eine umfangreiche Demo, die Ihnen helfen soll herauszufinden, wie Sie es für Ihre spezifischen Bedürfnisse implementieren können.

Hier ist ein schnelles Beispiel von der Plugin-Homepage:

%Vor%

Weitere Informationen finden Sie hier Ссылка

    
Matti Lyra 13.12.2009 14:37
quelle