Holen Sie sich Autocomplete-Optionen von AJAX nach typisiertem Wert

Question

Ich muss Autocomplete (von jQuery UI) verwenden, um Benutzernamen aus meiner Datenbank während der Eingabe vorschlagen.

Der normale Weg ist die Verwendung von Autocomplete source, aber meine Website hat Tonnen von Benutzernamen, und ich möchte nicht eine riesige Zeichenfolge, um die Benutzernamen zu halten. Ich habe über eine bessere Möglichkeit nachgedacht:

Wenn der Benutzer den ersten Buchstaben eines Benutzernamens eingibt, wird eine AJAX-Postanforderung an eine PHP-Datei aufgerufen, die die Benutzernamen erhält, die mit dem Buchstaben beginnen . Dann gibt es die Liste an die jQuery zurück und verarbeitet sie dann und macht das Ergebnis zu den Optionen für die automatische Vervollständigung.

Ist das besser als eine große Zeichenfolge mit allen Optionen? Ich konnte mich selbst nicht programmieren (ich konnte nicht herausfinden, wie man das mysql-Ergebnis in Autocomplete-Optionen umwandelt). Und was ist der richtige Weg, dies zu kodieren? Danke!

Answer 1

Dies ist ein Beispiel dafür, was ich getan habe vor:

JS

$("#username").autocomplete({ 
    source: "autocomplete.php", // Source for autocomplete must be an array, echoed out via json 
    minLength: 1 // Min length before autocomplete starts searching the array from source 
    }); 

PHP

// Pull in searchterm from username, $_GET['TERM'] is a built-in variable for autocomplete 
$term = strtolower($_GET['term']); 

$searchTerm = "$term%"; 
$query = "SELECT distinct username from access WHERE username LIKE ? ORDER BY username"; 
$stmt = $db->prepare($query); 
if($stmt){ 
    $stmt->bind_param("s",$searchTerm); 
    $stmt->execute(); 
    $stmt->bind_result($username); 
} 

// Create array for autocomplete to search 
$usernameList = array(); 
while ($stmt->fetch()){ 
     $usernameList[] = $username; // Assign names to the list 
} 
// Echo json data for autocomplete to retrieve 
echo json_encode($usernameList); 
$db->close(); 

HTML

<input type="text" name="username[]" id="username" />