Ich habe ein funktionierendes Autocomplete-Feld in meiner Webanwendung und ich suche nach einer Möglichkeit, die Nutzbarkeit des Feldes zu verbessern, indem ich die Kategorienfelder automatisch überspringe, wenn eine Pfeiltaste benutzt wird, um die verfügbaren Optionen herunterzuscrollen ( nach Eingabe eines Teils des Suchbegriffs).
Wenn ein Benutzer beispielsweise mit der Eingabe von "an" beginnt, werden bei der automatischen Vervollständigung zwei Kategorien angezeigt, in denen jeweils Elemente enthalten sind. Der Benutzer möchte eines der Elemente in der Liste unter "Personen" auswählen. Sie verwenden die Pfeiltaste, um die Liste nach unten zu verschieben. Derzeit fügt dieser Code die Kategorien in den Ergebnissen als Listenelement ein. Wenn Sie die Pfeiltasten verwenden, müssen Sie sie verschieben, um ein Ergebnis zu markieren und auszuwählen. Wie kann die Anwendung diese Kategorieüberschriften automatisch überspringen?
Diese Zeile:
%Vor%verursacht das Problem.
Intern verwendet das Widget Listenelemente mit einer Klasse ui-menu-item , um zu unterscheiden, ob ein li ein tatsächlich auswählbarer Menüpunkt ist oder nicht. Wenn Sie die "Ab" -Taste drücken, findet das Widget den nächsten Eintrag mit der Klasse ui-menu-item und springt zu diesem Objekt.
Entfernen Sie die Klasse und Ihr Code funktioniert wie gewünscht:
%Vor%Hier funktioniert es:
Da die angenommene Antwort in den letzten Versionen von jQueryUI (& gt; 1.10.4) nicht funktioniert, werde ich meinen Hack posten, vielleicht wird jemand es nützlich finden.
Ich benutze jQueryUI 1.12.0
Beim Anhängen der Kategorie habe ich eine neue Klasse hinzugefügt, ich nannte sie "categoryItem":
%Vor%Einige jQueryUI-Funktionen müssen auch überschrieben werden, damit jquery Elemente mit der Klasse "categoryItem" ignoriert (zwei Zeilen werden geändert).
%Vor%Tags und Links jquery-ui autocomplete categories jquery-ui-autocomplete