Ich versuche, eine Facebook-ähnliche Suche zu implementieren, die Ergebnisse liefert, während der Benutzer schreibt (Autocomplete), hier ist der jquery Code, den ich verwende:
%Vor%Das zurückkehrende Ergebnis ist in div Struktur. Was ich nicht weiß, ist, Benutzern zu erlauben, die Ergebnisse mit den [UP] - und [DOWN] -Tasten auf der Tastatur durchzugehen und das Ergebnis durch Drücken der [ENTER] -Taste auszuwählen.
EXTRA-INFO
Hier ist die display_box :
DAS HTML MARKUP
%Vor% Jedes Ergebnis hat den obigen HTML-Code und sie werden alle in ein <div> mit dem id=searchDisplay geladen.
* beachte, dass der php echo Teil eine while-Schleife hat, der obige Code ist nur die Idee, wie das html ist (das searchDisplay ist nicht auf derselben Seite wie das Ergebnis, überprüfe den jquery Code).
Es gibt ein jQuery-Plugin, mit dem man Aktionen an Tastaturkürzel binden kann. Ich habe es verwendet, um eine Liste von Elementen mit den Cursortasten zu navigieren:
Das Definieren eines Tastenkürzels mit Plugin ist so einfach:
%Vor%jQuery UI Autocomplete behandelt diese Funktionalität nett, ohne zusätzlichen Code:
Sehen Sie sich die Demo an dieser URL für eine kurze Einführung an.
Probieren Sie diesen Code ... ich habe aus meiner Lesezeichen Sammlung
gefundenIch habe Ihren Code ein wenig umgeschrieben, sollte das gleiche tun, nur einfacher zu lesen und ein wenig effizienter:
%Vor% Was die Suchergebnisse angeht, könntest du entweder nur auf jedes <a> -Element abzielen, aber wahrscheinlich hast du andere <a> -Elemente auf deiner Seite, also würde ich einen Wrapper hinzufügen, um sie einfacher zu targetieren, was du tun könntest das mit jQuerys Funktionen wrap () und each (), aber wenn möglich, wäre es am einfachsten, es einfach in dein PHP einzufügen, so:
Wie beim Umschalten des Ergebnisses mit den Pfeiltasten nach oben / unten und Ändern der Position in die Suchergebnisse, würde ich etwas tun (beachten Sie die Verwendung der zuvor hinzugefügten .wrapper-Klasse):
%Vor% Um einige Selektoren zwischenzuspeichern und mit der Funktion keyup zusammenzufassen, machen Sie:
Hier ist eine DEMONSTRATION
Tags und Links javascript jquery ajax autocomplete