Update to Ajax control toolkit breaks autocomplete
I recently updated an application to the latest version of the Ajax Control Toolkit and my AutoComplete Extender broke. It was returning the list fine. but in the dropdown the only values showed were undefined. Not cool. But after some research I changed the web service that returns the values to use the new AutoComplete Item
First Version
A0
1: [WebMethod]
2: public string[] AutoComplete( string prefixText, int count )
3: {
4: List<string> results = new List<string>();
5: IDataReader reader = DataLayer.AutoCompleteLookup(prefixText).GetReader();
6: while (reader.Read())
7: {
8: results.Add(reader[0].ToString());
9: }
10: A0
11: return results.ToArray();
12: }
That worked fine, and I have a feeling that if the service wasn't returning numeric values like 01-145 that it might still be fine, but the service was returning values like 01-145 so I had to do this
1: [WebMethod]
2: public string[] AutoComplete( string prefixText, int count )
3: {
4: List<string> results = new List<string>();
5: IDataReader reader = DataLayer.AutoCompleteLookup(prefixText).GetReader();
6: while (reader.Read())
7: {
8: results.Add(
9: AutoCompleteExtender.CreateAutoCompleteItem
10: (
11: reader[0].ToString(),
12: reader[0].ToString()
13: )
14: );
15: }
16: return results.ToArray();
17: }
After that changed the AutoComplete worked again.
Now that got me wondering what I could do with the AutoComplete Item that comes back. So I found a post by Phani Raj. The Extender Control has a property OnClientItemSelected (actually the extender has 9 OnClient events) so you could do something like this.
1: <ajax:AutoCompleteExtender ID="AutoComlete" runat="server"
2: TargetControlID="lookupBox"
3: ServicePath="~/services/Lookup.asmx"
4: ServiceMethod="AutoComplete"
5: OnClientItemSelected="AutoComlete_Selected" />
6:
7: <script language="javascript">
8: function AutoComlete_Selected( source, eventArgs ) {
9: $get("hiddenField").value = eventArgs.get_value();
10: //eventArgs also has .get_text()
11: }
12: </script>
Hope this helps someone