Javascript to fire event when a key pressed on the Ajax Toolkit Combo box.

Question

I have the following drop down list which is using the Ajax Toolkit to provide a combo box

<cc1:ComboBox ID="txtDrug" runat="server" style="font-size:8pt; width:267px;" 
                                                Font-Size="8pt" DropDownStyle="DropDownList" 
                                                AutoCompleteMode="SuggestAppend" AutoPostBack="True" 
                                                ontextchanged="txtDrug_TextChanged" />

Now I need to load this up with approx 7,000 records which takes a considerable time, and effects the response times when the page is posted back and forth.

The code which loads these records is as follows;

                dtDrugs = wsHelper.spGetAllDrugs();

                txtDrug.DataValueField = "pkDrugsID";
                txtDrug.DataTextField = "drugName";
                txtDrug.DataSource = dtDrugs;
                txtDrug.DataBind();

However if I could get an event to fire when a letter is typed instead of having to load 7000 records it is reduced to less than 50 in most instances.

I think this can be done in Javascript. So the question is how can I get an event to fire such that when the form starts there is nothing in the drop down, but as soon as a key is pressed it searches for those records starting with that letter.

The .Net side of things I'm sure about - it is the Javascript I'm not.

Thanks in advance

Answer 1

I think what you're looking for is AutoComplete extender attached to a TextBox, you need to set following properties to provide data source for the extender:

ServiceMethod="GetCompletionList"
ServicePath="AutoComplete.asmx"

Where AutoComplete.asmx is link to your service and GetCompletionList is your service method to call, the signature of this method must match the following:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[]
GetCompletionList(string prefixText, int count) 
{ ... }