Question

I am trying to follow this solution, but not getting any luck.
jQuery autocomplete for dynamically created inputs

var autocomp_opt = {
    source: function (request, response) {

    $.ajax({
        url: "ServiceProxy.asmx/ByKeyWord",
        cache: false,
        data: "{ 'term':'" + request.term + "'}",
        dataType: "json",
        type: "POST",
        crossDomain: "true",
        contentType: "application/json; charset=utf-8",
        error: function (xhr, textStatus, errorThrown) {
            alert('Error: ' + xhr.responseText);
        },
        success: function (data) {
            response($.map(data, function (item) {
                return item.split(",");
            }));       
        },

        error: function (a, b, c) {

        }
    });
},
    minLength: 2
};

And then when my input box gets generated, I tried…

    input = document.createElement("input");
    input.disabled = true;  
    input.className = this.FORM_INPUT_CLASS;

    $(input.id).autocomplete(autocomp_opt);
    table.rows[table.rows.length - 1].cells[1].appendChild(input);

There was no errors, but it doesn’t seem to bind it correctly…if anyone has any idea-please post. thanks.

Answer 1

It works when I add:

    $('#fieldname").autocomplete(autocomp_opt);

after this line

    table.rows[table.rows.length - 1].cells[1].appendChild(input);

I guess it can only registered when the input box is appended to something. It’s also worth noting that adding some sort of event handle onfocus, onselect, ie.., it also works. Though I suspect, it’s because the input box is fully rendered/added at this point.