AutoComplete Select-Feld

[EuroCent]

Ich möchte gern über ein Select-Feld ein AutoCompleter laufen lassen.

Ich weiß das es einige beispiele gibt, jedoch führt alles nie zu dem Ergebnis :/
Da Ich noch nichts mit jQuery oder allgemein was mit Ajax gemacht habe, bin ich mehr oder weniger auf Euch angewiesen

Ich möchte das man in die Select-Box auch schreiben kann

Sprich statt einer Textbox und einer Selection-Box.

Hoffe man versteht was Ich will.

Ich lasse aus einer Datenbank alles in die Selection eintragen.

<script type="text/javascript">
function showUserDetails(str) {
    if (str=="") {
        document.getElementById("txtHint").innerHTML="<b>Information zu einem Kunden steht hier.</b>";
        return;
    }
    
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","members.php?id="+str,true);
    xmlhttp.send();
}
</script>

<?php
$sql = $db->query("SELECT * FROM `ptc_members`");
$conZahl = $db->num_rows($sql);

while($row = $db->fetch_row($sql)) {
    $contacts .= "<option value=\"{$row[0]}\">{$row[1]}</option>\n";
}
?>

<select name="users" id="users" onChange="showUserDetails(this.value)">
<option value="">--- Bitte Wählen ---</option>

<?php $db->getData($contacts); ?>

</select>
<div id="txtHint"><b>Information zu einem Kunden steht hier.</b></div><br />

Komplett:

<script type="text/javascript">
function showUserDetails(str) {
    if (str=="") {
        document.getElementById("txtHint").innerHTML="<b>Information zu einem Kunden steht hier.</b>";
        return;
    }
    
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    
    xmlhttp.open("GET","members.php?id="+str,true);
    xmlhttp.send();
}
</script>
<?php
$sql = $db->query("SELECT * FROM `ptc_members`");
$conZahl = $db->num_rows($sql);

while($row = $db->fetch_row($sql)) {
    $contacts .= "<option value=\"{$row[0]}\">{$row[1]}</option>\n";
}
?>
<select name="users" id="users" onChange="showUserDetails(this.value)">
<option value="">--- Bitte Wählen ---</option>
<?php $db->getData($contacts); ?>
</select>
<div id="txtHint"><b>Information zu einem Kunden steht hier.</b></div><br />

 

[Parantatatam]

Ich sehe gerade in Deiner SQL-Abfrage den Nutzen nicht, da Du doch jedes Mal alle Einträge aus der Datenbank abfragst. Wenn Du das vor hast, was ich denke, dass Du es vor hast, dann willst Du doch nur die Einträge laden, die auf die bisherige Eingabe in dem Textfeld passen – oder wenn noch nicht gesehen alle. In dem Fall müsstest Du mal nach Autocomplete schauen.

Falls dies nicht ist, was Du haben möchtest, sondern Du alle Einträge erst laden willst und dann darauf reagieren möchtest, könntest Du Dich mal mit dem Datalist-Element auseinandersetzen, was mit HTML5 Einzug hielt: http://jsbin.com/wehowuho/1/edit

 

[EuroCent]

Super genau das ist es was ich gesucht habe

Also das letztere mit datalist

VIELEN DANK