Vervollständigung von Namen mit jQuery

Kürzlich stand ich vor der Aufgabe, ein Nachrichtenformular zu programmieren. Mir stellte sich die Frage, wie man den Nutzer möglichst komfortabel einen Nutzernamen als Empfänger auszuwählen.

Zuerst schien es mir am sinnvollsten, eine einfache Dropdown-Liste mit allen Nutzern anzuzeigen. Dies klappte zunächst ganz gut, allerdings wurde es immer langwieriger, einen Empfänger auszuwählen, je mehr Nutzer sich registrierten. Also entschied ich mich, ein Textfeld mit Auto-Vervollständigung zu erstellen.

In diesem Artikel erfahrt ihr, wie ihr ein solches Feld mit jQuery erstellt und wie ihr die Eingaben später auswertet.

Als erstes müssen jQuery und jQuery UI eingebunden werden, welche die Auto-Vervollständigung bereitstellen.

Die MySQL-Tabelle, in der die Nutzer gespeichert sind, sieht bei mir so aus, natürlich kann die Tabellenstruktur auch variieren.

Der Name wurde in zwei Teilen in der Datenbank gespeichert.

Als erstes brauchen wir ein Formular, in dem sich das Eingabefeld für den Empfänger befindet. Aus Gründen der Übersichtlichkeit lasse ich hier alle anderen Formularfelder für den Nachrichtentext und Ähnliches weg.

<form id="messageForm">
	<input type="text" id="messageTarget" name="messageTarget" />
</form>

jQuery braucht für die Auto-Vervollständigung nur ein Array mit den Nutzernamen. Das erstellen wir jetzt mit PHP im Kopf des Dokumentes.

<script type="text/javascript>
	<![CDATA[
		<?php
			$result = mysql_query("SELECT id, CONCAT(givenname, ' ', name) AS fullname FROM users");
			echo 'var userNames = [';
			if($row = mysql_fetch_object($result)) {
				echo '"' . $row->fullname . '"';
			}
			while($row = mysql_fetch_object($result)) {
				echo ', "' . $row-&amp;gt;>fullname . '"';
			}
			echo '];';
		?>
	]]>
</script>

Jetzt gibt es ein JavaScript-Array, das alle Nutzernamen beinhaltet.

Als nächstes müssen wir jQuery anweisen, für unser Textfeld die Auto-Vervollständigung zu aktivieren.

$('#messageForm #messageTarget').autocomplete(
{
	source: userNames
});

Damit funktioniert alles wie gewünscht, der Nutzer kann bequem einen Empfänger auswählen. Allerdings bin ich bei der Auswertung der Formulardaten auf ein weiteres Problem gestoßen. jQuery übergibt nun bei dem Absenden des Formulars nur den Namen des Empfängers, nicht die ID.

Dieses Problem konnte ich einfach auf folgende Weise lösen.

$result = mysql_query("SELECT id FROM users WHERE CONCAT(givenname, ' ', name) = '" . addslashes($_POST['messageTarget']) . "'");
if($row = mysql_fetch_object($result)) {
	//Es wurde ein korrekter Empfänger angegeben. Die Nachricht kann gesendet werden. Die ID ist $row->id
}
else {
	//Kein korrekter Empfänger, Fehler ausgeben
}

Mit dieser Abfrage kann schnell der übergebene Empfänger verifiziert und seine ID ermittelt werden.

Ich hoffe, dieses kurze Tutorial hilft euch, schnell und einfach ein Formular mit Auto-Vervollständigung zu erstellen. Das ist eine gute Möglichkeit, um die Eingabe für den Benutzer zu vereinfachen.

Habt ihr noch Fragen oder Feedback? Wollt ihr eure Erfahrungen zum Thema Auto-Vervollständigung oder Usability schildern? Dann hinterlasst mir einfach einen Kommentar!