Wie versprochen hier also der zweite Teil meiner "Introducing Atlas" - Serie:
AutoCompleteExtender
Google Suggest, Gmail und und und... alle haben sie so ne nette Autovervollständigung an. Das heisst, ich tippe Text in eine TextBox und unten dran werden Vorschläge angezeigt, was vielleicht gemeint sein könnte.
Atlas bietet hier also mit dem AutoCompleteExtender-Control ein fix-fertiges Control, dass dies bereits kann.
Die Beispiel-Applikation
Als Beispiel erstellen wir eine kleine Bilder-Upload - Seite. Neben dem simplen Upload kann auf der Seite auch noch nach bereits upgeloadeten Bildern gesucht werden. Und in dieser Suche werden wir versuchen zu "erraten", welches File der User gerade sucht und ihm unsere Vorschläge entsprechend anbieten.
Die Zutaten
Vieles brauchts nicht um so eine AutoComplete-Textbox hinzuzaubern:
- Eine TextBox :-)
- Das AutoCompleteExtender-Control
- Ein WebService, der die anzuzeigenden Daten bereitstellt
1. WebService
Das AutoCompleteExtender-Control benötigt als Source zwingend einen WebService. Dieser muss eine WebMethod die zwei Parameter aufnimmt:
prefixText und
count.
| prefixText | an diesen Parameter werden die in der TextBox eingegebenen Daten übergeben
|
| count | dieser Parameter enthällt die gewünschte Anzahl an Resultaten
|
In unserem Fall werden wir auf die Namen der Files zugreifen, die im Upload-Folder liegen und diese gemäss den übergebenen Parametern filtern.
2. AutoCompleteExtenderDas MarkUp des Controls gibt Aufschluss über die Möglichkeiten:
<atlas:AutoCompleteExtender runat="server" ID="autoComplete" DropDownPanelID="panWordList">
<atlas:AutoCompleteProperties
TargetControlID="fileSearch"
Enabled="True"
ServicePath="DataAccessorService.asmx"
ServiceMethod="GetFiles" MinimumPrefixLength="1" />
</atlas:AutoCompleteExtender>
| targetControlId | Hier wird die TextBox angegeben, die das AutoComplete-Feature bieten soll
|
| ServicePath | Der Pfad zur WebService-Datei der die Daten bereitstellt
|
ServiceMethod
| Der Name der WebMethod
|
MinimumPrefixLength
| Ab dieser Länge des eingegebenen Strings wird der WebService abgefragt
|
Im Property "
DropDownPanelID" kann das Panel angegeben werden, welches benutzt werden soll, um die AutoComplete-Daten einzublenden. Das Property ist allerdings optional, wenn nichts angegeben wird, kümmert sich der AutoCompleteExtender selber darum.
Leider kann man das Aussehen dieses Panels nur sehr beschränkt beeinflussen.
Die Properties visibility, background-color, color, border, cursor, overflow, width, und height werden vom AutoCompleteExtender überschrieben und können so nicht beeinflusst werden!
Das wars
Ein nettes Feature, dass superleicht einzubinden ist - und trotzdem absolut flexibel ist. Einzig die eingeschränkten Möglichkeiten in der Darstellung sind etwas lästig.
Die Beispiel-Applikation gibts natürlich zum Download:
AutoCompleteExtender.zip (392.35 KB)