Question

In a WebUserControl I have an input element and I want it to display a list of values using Jquery Autocomplete. It isn’t working at all.

This is the script for populating the list:

$(document).ready(function() {    
    var availableTags = [
            "ActionScript",
            "AppleScript",
            "Other one"
            ];
    $("#listaCecos").autocomplete({
        source: availableTags
    });
});

I stablished a breakpoint and found:

• When the .autocomplete line gets executed, $("#listaCecos") seems to be uninitiallized. In the console it shows the following: []
• After the page has loaded completely, $("#listaCecos") shows the element correctly [<input id=​"listaCecos" name=​"listaCecos">​]
• Once the page has been loaded, I can execute the .automcomplete code (above code block) on the console and the input start to work OK.

So, I suppose it is not working because when .autocomplete script is executed, the input element hasn’t been loaded properly (it is inside a webusrcontrol and it is invisible at the moment of the initial page load).

Please help me to identify where and when should I put the autocomplete set up script so the input gets properly populated.

Answer 1

I managed to solve it. The input is inside an UpdatePanel and it replaces its contents so the autocomplete configuration is lost.

The solution was to re-configure the autocomplete feature on each end_Request:

$(document).ready(function() {
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "ceshar"
            ];
        $(".listaCecos").autocomplete({
            source: availableTags
        });
    } 
});