Gaia Ajax: AutoCompleter
The Gaia Ajax AutoCompleter allows the user to type in a query into a TextBox and a list of items
that satisfy this query according to your code will appear, from which the user can select an item.
The Gaia Ajax AutoCompleter is extremely rich, flexible and versatile. You can add up complex Ajax Controls
into its items collection and everything will "just work". The user types in a query into a TextBox then
you can fill the AutoCompleterItems controls collection with items from a server-side event handler, when the
user selects a control (item), you will get access to the control through the SelectedValue property.
User selection is being done with the arrow keys in addition to that the user can use Up, Down, Page Up or
Page Down to scroll 5 items at the time or even Home and End to go to the top or the bottom of the list.
In this example a user can select a country just by typing in the first few letters
of the country and a list of matched countries are displayed with the flag, name and the
searched portion is also highlighted.
These features were not built into the Autocompleter, but because the control is so
flexible it was quite easy to build this functionality with a few simple building blocks
Which country do you live in ?
Markup (ASPX/.aspx)
1:
2: <div class="container-status">
3: <gaia:Label
4: ID="Label1"
5: Font-Bold="true"
6: runat="server" />
7: <gaia:Panel
8: runat="server"
9: ID="zPanelResult"
10: Visible="false">
11: <h3>Results</h3>
12: <p>You selected <gaia:Image id="zImageResult" runat="server"/>
13: <gaia:Label ID="zCountryResult" runat="server" />
14: </p>
15: </gaia:Panel>
16: </div>
17:
18: <asp:Label
19: runat="server"
20: ID="AutcompleterLabelHelper"
21: Font-Bold="true"
22: Text="Which country do you live in ? " />
23: <br />
24:
25: <gaia:AutoCompleter
26: ID="AutoCompleter1"
27: runat="server"
28: Width="350px"
29: Height="225px"
30: CssClass="gaiax"
31: OnGetAutoCompleterItems="AutoCompleter1_GetAutoCompleteData"
32: OnSelectionChanged="AutoCompleter1_SelectionChanged" />
33: <br />
34: <br />
35:
36:
37:
38: