JQuery Kochbuch (German Edition)

werden kann. Die Menge der gültigen Zeichen wird dabei als Regex-Zeichenklasse definiert. Nun kann auch die Tilde in einer Maske verwendet werden.
    Das Fragezeichen ermöglicht Masken mit einem festen und einem optionalen Teil. Eine Telefonnummer mit einer optionalen Durchwahl könnte wie folgt definiert werden:
$("#phone").mask("(999) 999-9999? x99999");
    Wenn eine Masken-Eingabe mit dem Validation-Plugin ( Forms überprüfen ) kombiniert wird, ist es wichtig, dass für das Feld die richtigen Regeln definiert sind. Ansonsten akzeptiert das Validation-Plugin eventuell die Platzhalter-Zeichen der Maske als gültige Eingabe. Der Anwender würde dadurch verwirrt, weil ein ungültiges Feld als gültig markiert würde, obwohl er erst das erste Zeichen eingegeben hat.
    Einschränkungen
    Die wichtigste Einschränkung des Plugins ist der Zwang zu Feldern mit festen Längen. Man kann es nicht für variable Längen verwenden, wie zum Beispiel einen Währungs-Wert. So könnte man zum Beispiel mit »$ 999.999,99« nur einen Wert zwischen 100.000,00 und 999.999,99 eingeben, aber nichts darüber oder darunter.

Textfelder automatisch vervollständigen
    Problem
    Es gibt zwei HTML-Eingabefeld-Typen, bei denen ein Anwender einen Wert aus einer Liste bestehender Werte auswählen kann: Radio Buttonsund Selects.Radio Buttons sind für Listen mit bis zu acht Einträgen sinnvoll, während Selects bis zu 30 oder 150 Einträgen noch gut anwendbar sind – abhängig von der Art der Daten. Wenn der Anwender aber auch einen neuen Wert eintragen kann, helfen sie nicht weiter – meist wird ihnen dann ein Feld »Andere« beigestellt. Wird die Liste richtig groß – 500 oder sogar 500.000 Einträge, dann sind auch sie nicht mehr verwendbar.
    Lösung
    Das Autocomplete-Widget von jQuery UI kann die verschiedenen Situationen abdecken, in denen ein Select nicht ausreichend ist. Im einfachsten Fall sind die anzuzeigenden Daten in einem JavaScript-Array verfügbar:
Wählen Sie einen Monat aus:


var months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
'August', 'September', 'Oktober', 'November', 'Dezember'];
$("#month").autocomplete({
    source: months
});
    Hier wenden wir das Autocomplete-Plugin auf ein Eingabefeld für einen Monat an, wobei die Daten in einem einfachen JavaScript-Array bereitgestellt werden.
    Sind die Daten noch nicht auf Client-Seite vorhanden, dann kann das Plugin sie vom Server holen:
$("#month").autocomplete({
    source: "addresses.php"
});
    Das Plugin schickt dann eine GET-Anfrage an diese Ressource, wobei der vom Benutzer eingegebene Wert als Parameter
q
angehängt wird, also zum Beispiel
addresses.php?q=ma
. Als Antwort erwartet das Plugin eine Liste mit durch Zeilenumbruch getrennten Werten:
Mainstraße
Marktstraße
Markusstraße
    Diskussion
    Zuerst muss man sich entscheiden, ob man das Plugin mit lokalen oder mit Remote-Daten nutzen will.
    Bei lokalen Daten ist die vollständige Liste der Daten schon im Speicher des Browsers vorhanden. Sie kann als Teil der Seite oder über eine eigene Ajax-Anfrage geladen werden. Auf jeden Fall wird sie nur ein Mal geladen. Dieses Modell ist dann sinnvoll nutzbar, wenn die Daten klein und statisch sind – weniger als 500 Zeilen – und sich beim Auswählen eines Werts nicht ändern. Der große Vorteil dieser Methode ist der, dass die Daten außerordentlich schnell gefunden werden.
    Remote-Daten werden vom Server in kleineren Häppchen geladen (bis zu 100 Zeilen sind sinnvoll). Dies funktioniert sowohl mit kleinen Datenmengen als auch mit sehr großen (zum Beispiel mehr als 500.000). Da die Daten vom Server geladen werden, ist der Suchprozess im Vergleich zu lokalen Daten langsamer. Das kann man durch Datenhappen »ausgleichen«, die groß genug sind und die dann im Client ohne weitere Anfragen gefiltert werden können.

Einen Wertebereich selektieren
    Problem
    Stellen Sie sich eine Webseite vor, auf der Sie nach Autos suchen können: Der Anwender gibt den für ihn akzeptablen Preisbereich ein und während er den Wert ändert, wird die Liste der sich in diesem Bereich befindenden Autos aktualisiert. Die HTML-Form-Elemente für diese Art von Eingaben – Texteingabefelder, Radio Buttons, Selects – reichen dafür nicht aus. Einerseits benötigt jedes dieser Felder einen exakten Wert. Andererseits sind sie nicht in der Lage, den Preisbereich darzustellen. Zudem ist es nicht möglich, den gesamten Bereich zu