«

»

Aug 17

Artikel drucken

jQuery UI autocomplete selectFirst

Das wohl bekannteste autocomplete-Javascript, auf Basis von jQuery, ist wohl jQuery autocomplete :-)
klingt komisch – ist aber so :-)

Seit jQuery UI ein autocomplete Widget enthält, hat der Entwickler des alten Plugins dieses für “deprecated” gekennzeichnet.
Mit jQuery UI sind aber eine Vielzahl an Funktionen, die das alte autocomplete angeboten hat, weggefallen.

Meiner Meinung nach eine sehr brauchbare Funktion war “selectFirst”, womit immer das erstgewählte Element in der DropDown-Liste vorselektiert ist.
Dieses Feature wird zwar nicht in jQuery UI autocomplete Einzug finden, allerdings haben die Entwickler hier eine Erweiterung zur Verfügung gestellt.

Einfach folgenden Code in seine Seite einfügen:

(function( $ ) {

$( ".ui-autocomplete-input" ).live( "autocompleteopen", function() {
	var autocomplete = $( this ).data( "autocomplete" ),
		menu = autocomplete.menu;

	if ( !autocomplete.options.selectFirst ) {
		return;
	}

	menu.activate( $.Event({ type: "mouseenter" }), menu.element.children().first() );
});

}( jQuery ));

Dadurch kann man die Funktion in jQuery UI autocomplete doch verwenden:

$("input#autocomplete").autocomplete({
    source: ["php", "html", "mysql", "css"],
    selectFirst: true
});

Ganz glücklich bin ich allerdings nicht mit jQuery UI autocomplete, wenn man sich alle Funktionen nachbauen muss, kann man schon fast auf das Widget verzichten.
Weitere Infos und Demos zum jQuery UI autocomplete Widget

Ähnliche Artikel:

  1. jQuery UI 1.9 Preview mit Tooltip und Menü

Über den Autor

Markus

Arbeitet in einer Webagentur im wunderschönen Augsburg. Spezialisiert auf die Bereiche Community, SEO und was sonst so anfällt :-)

Permanentlink zu diesem Beitrag: http://kress.it/2010/08/jquery-ui-autocomplete-selectfirst/

3 Kommentare

  1. Sebastian Koch

    Diese Erweiterung funktioniert im IE6 nicht, wenn bgiframe verwendet wird. Meine Lösung dazu ist, Zeile 11 zu erstetzen durch:

    menu.activate( $.Event({ type: "mouseenter" }), menu.element.find('li').first() );

    Viele Grüße!!!

  2. Markus

    Danke für den Hinweis – aber nach 10 Jahren IE6 habe ich mich dazu entschlossen ihn nicht mehr weiter zu berücksichtigen.
    Irgendwann muss das ein Ende haben, aber dennoch ein guter Tipp/Hinweis!

  3. larsauswsw

    Auto-Focus hat die Funktion nun…

    “autoFocus: If set to true the first item will be automatically focused.”

    http://docs.jquery.com/UI/Autocomplete#option-autoFocus

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Sie können diese HTML-Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>