Creating AutoCompleteExtender Trigger Button
Creating AutoCompleteExtender Trigger Button
Yesterday I’ve been
consulting
at a client.
During the day, I got a
question regarding
ASP.NET AJAX
Control Toolkit’s
AutoCompleteExtender.
The question was how
to create a trigger button to the AutoCompleteExtender in order to
go to the server and fetch the results.
This post will describe how to do that.
Creating an Autocomplete Web Service
The first thing to do when you want to use the AutoCompleteExtender
is to create the web service that you’ll connect to. In my example, I’m
going to use the following suggestions web service:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
[ScriptService]
public class SuggestionsService : WebService
{ [WebMethod]
public string[] GetSuggestions(string prefixText, int count)
{ List<string> results = new List<string>();
for (int i = 0; i < count; i++)
{ results.Add(string.Format("{0}{1}", prefixText, i)); }
return results.ToArray();
}
}
Creating The Web Page
After we have our service, it is time to create our web page.
The following web page contains a text box with the
AutoCompleteExtender and a button to trigger the auto complete
from client side:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ID="SuggestionsAutoComplete" runat="server"
TargetControlID="txtAutoComplete" ServiceMethod="GetSuggestions"
ServicePath="SuggestionsService.asmx" MinimumPrefixLength="1"
CompletionSetCount="20">
</cc1:AutoCompleteExtender>
<br />
<asp:Button ID="btnTrigger" runat="server" Text="Trigger Auto Complete"
OnClientClick="BLOCKED SCRIPTshowAutoComplete()"/>
</div>
</form>
Nothing special here.
The Trigger Function
The following method is the trigger function:
<script type="text/javascript">
function showAutoComplete() { var autoComplete = $find('SuggestionsAutoComplete'); autoComplete.get_element().focus();
autoComplete._textBoxHasFocus = true;
autoComplete.get_element().value = '';
Sys.Net.WebServiceProxy.invoke(autoComplete.get_servicePath(),
autoComplete.get_serviceMethod(),
false,
{ prefixText: '', count: autoComplete._completionSetCount }, Function.createDelegate(autoComplete, autoComplete._onMethodComplete),
Function.createDelegate(autoComplete, autoComplete._onMethodFailed),
'',
5000);
$common.updateFormToRefreshATDeviceBuffer();
}
</script>
First I find the extender. Then, I set focus on the extender.
Without setting the focus on the extender nothing will work.
After the focus setting, I use the Sys.Net.WebServiceProxy.invoke
method which will invoke the auto complete. The last thing to do is to
use the $common.updateFormToRefreshATDeviceBuffer method which
is registered by the AutoCompleteExtender in order to make
updates to form elements and to refresh their document buffer
to what is showing live in the browser.
Summary
Lets sum up, today I showed a simple solution to a demand that was
raised by a customer. As I could see in my searches on the net that
demand is common so I hope this solution will help you if you need
that functionality.
CodeProject