jQuery UI autocomplete selectFirst

1 Star2 Stars3 Stars4 Stars5 Stars
Loading...

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

Autor: Markus

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