Hier will ich Euch zeigen, wie Ihr bei jQuery mit dem Feature autocomplete umgehen müsst. Zuerst aber mal ein paar Beispiele:

In diesem Beispiel greife ich nicht auf eine Datenbank zu, sondern verwende eine lokale Liste. Ein Array. Laut jQuery-Doku könne diese Listen bis zu 50 Einträge aufnehmen. Natürlich geht auch mehr, aber ab 50 Einträgen ist so der Punkt gekommen wo Ihr mal darüber nachdenken solltet diese Liste nicht vielleicht doch über eine Datenbanktabelle zu realisieren.

Derzeit schaut meine Liste folgendermaßen aus:

var fruits = ['Apfel', 'Birne', 'Banane', 'Kirsche', 'Kiwi', 'Erdbeere', 'Himbeere', 'Brombeere', 'Kürbis', 'Orange', 'Klementine', 'Apfelsiene', 'Pfirsich', 'Pomelo'];

natürlich geht auch diese Version:

var fruits = new Array('Apfel', 'Birne', 'Banane', 'Kirsche', 'Kiwi', 'Erdbeere', 'Himbeere', 'Brombeere', 'Kürbis', 'Orange', 'Klementine', 'Apfelsiene', 'Pfirsich', 'Pomelo');

Aber um dem Motto von jQuery ("Write less, do more") Folge zu leisten, empfehle auch ich die erste Variante.

jQuery (domready)

var fruits = [{id: 1, value: 'Apfel'}, {id: 2, value: 'Birne'}, {id: 3, value: 'Banane'}, {id: 4, value: 'Kirsche'}, {id: 5, value: 'Kiwi'}, {id: 6, value: 'Erdbeere'}, {id: 7, value: 'Himbeere'}, {id: 8, value: 'Brombeere'}, {id: 9, value: 'Kürbis'}, {id: 10, value: 'Orange'}, {id: 11, value: 'Klementine'}, {id: 12, value: 'Apfelsiene'}, {id: 13, value: 'Pfirsich'}, {id: 14, value: 'Pomelo'}];
$("#localList").autocomplete({
    source: fruits,
    minLength: 1,
    select: function (event, ui) {
        alert('ID: ' + ui.item.id + '; Value: ' + ui.item.value);
    }
});
$('body').removeClass('ui-widget-content');

HTML

<label for="localList">Früchte: </label><br />
<input id="localList" />

CSS

Dieses CSS wurde automatisch vom CSS-Generator von jQuery UI erzeugt.

/* Autocomplete
----------------------------------*/
.ui-autocomplete { position: absolute; cursor: default; }    
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

/* Menu
----------------------------------*/
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    margin: -1px;
}