Adding AutoCompleteExtenders dynamically on client side

In my current efforts to build rich client webforms in html/javascript I came across a need to dynamically add an AutoCompleteExtender for a newly created element on the page. Basically the page contains a table which the user can click an “Add” button to add a new row, and in each new row I wanted the user to get autocomplete functionality without a round trip to the server.

 

Upon inspecting the rendered page containing an AutoCompleteExtender we will see the following javascript:

 

1 Sys.Application.add_init(function() {
2     $create(Sys.Extended.UI.AutoCompleteBehavior, {"completionInterval":500,"completionListCssClass":"AutoExtender","completionListItemCssClass":"AutoExtenderList","completionSetCount":20,"delimiterCharacters":"","highlightedItemCssClass":"AutoExtenderHighlight","id":"acAccessory","minimumPrefixLength":2,"serviceMethod":"GetSuggestions","servicePath":"../../AJAX/Products.asmx"}, {"itemSelected":ItemSelected}, null, $get("MyClientID"));
3 });

 

So, we can see that the autocompleteextender registers an initialization function to create the autocomplete functionality for a given control’s clientID. We can take that same code and put it in our javascript (such as the onclick handler for the “Add” button) and use it to add autocomplete to any text input we like.

Here is my function that adds a new row to the table and gives one of the text inputs autocomplete:

 

01 function AddUpgradeOption(index, name, price, productId)
02 {
03     var row = tblOptions.insertRow(tblOptions.rows.length);
04     var cell = row.insertCell(0);
05     cell.innerHTML = 'Name: <input type="text">';
06     var cell = row.insertCell(1);
07     cell.innerHTML = 'Price: <input type="text">';
08     var cell = row.insertCell(2);
09     cell.innerHTML = 'Select Item: <input id="txtSearchItem' + index + '" type="text">';
10
11     $create(Sys.Extended.UI.AutoCompleteBehavior,
12     {"completionInterval":500,
13     "completionListCssClass":"AutoExtender",
14     "completionListItemCssClass":"AutoExtenderList",
15     "completionSetCount":20,"delimiterCharacters":"",
16     "highlightedItemCssClass": "AutoExtenderHighlight",
17     "id": "AutoComplete1",
18     "minimumPrefixLength": 2,
19     "serviceMethod": "GettSuggestions",
20     "servicePath": "../../AJAX/Products.asmx"
21 },
22      { "itemSelected": ItemSelected }, null, $get("txtSearchItem" + index));
23 }

 

 

You will of course need to have at least one server-side autocompleteextender on the page to start with so that the necessary javascript resources are included in the page.

Advertisements
This entry was posted in ASP.NET, Javascript and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s