Advitum.de auf Google+

Vervollständigung von Namen mit jQuery

Vervollständigung von Namen mit jQuery
VN:F [1.9.22_1171]
Bewertung: 5.0/5 (2 Stimmen abgegeben)
Von am
Kategorien: JavaScript, jQuery, PHP, Programmieren, Tipps, Tutorials

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.

Vervollständigung von Namen mit jQuery, 5.0 out of 5 based on 2 ratings

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.

id name givenname
1 Ebert Lars
2 Hummel Patrick

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-&gt;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!

Vervollständigung von Namen mit jQuery, 5.0 out of 5 based on 2 ratings

Links zum Thema

Jetzt seid ihr dran!

Teilt eure Meinung mit uns in den Kommentaren, gebt eine Bewertung für diesen Artikel ab und teilt ihn in Social Networks!

Über

Ich bin ein junger Webdesigner und Programmierer aus Siegen und blogge auf Advitum.de über meine Erfahrungen im Web. Meine Themenschwerpunkte liegen im Bereich der Web-Entwicklung mit PHP, JavaScript, HTML und anderen Script-, Programmier- und Markup-Sprachen, der Nutzung von Content Management System wie Typo3, Wordpress etc. und der Effekt-Hascherei mit Photoshop. Seit 2008 blogge ich auf Advitum.de – mal mehr, mal weniger regelmäßig – über alles, was mich so interessiert. Wenn dir mein Blog gefällt, freue ich mich immer sehr über Feedback in Form von Kommentaren und E-Mails.

Kommentare zu diese Artikel

Schreibe jetzt einen Kommentar!

Wolf schrieb am Antworten

Hi,
etwas ähnliche HTML5 basiertes gibt es auch … datalist-tag
http://www.w3schools.com/tags/tag_datalist.asp

Funktioniert auch ohne JQ / aber nur in neuen Browsern

Diese Artikel könnten dir auch gefallen