Dynamic input textbox not binding to autocomplete

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.

Check your browser's JavaScript console. You'll end up with `input.id` not being defined, most likely. — Bojangles, Oct 21 '11 at 23:03
The input.id is defined elsewhere and does show up correctly. Can you give an example of this for autocomplete. The sample I have seen has to do with mouse click. But did is just a predefined function, so I am not sure. The jquery syntax is killing me... — wirble, Oct 22 '11 at 00:38
sorry - i should have been more clear. Its just the name of id="myvalue" for the text box and is set like input.id = "myvalue" — wirble, Oct 22 '11 at 01:29

score 3 · Answer 1 · answered Oct 22 '11 at 01:32

3

Try changing this line:

$(input.id).autocomplete(autocomp_opt);

to this:

$('#' + input.id).autocomplete(autocomp_opt);

answered Oct 22 '11 at 01:32

jk.

14,365
4
43
58

1

Make me laugh when I see this, I make this mistake a lot. Since input.id does not have the hash symbol, jQuery just return no element, and skips binding and gracefully fails with no errors, simply because it cannot find the intended target. – b01 Oct 22 '11 at 01:37
@jk That didn't work. It works when the input text is already on the page. But doesn't work dynamically... – wirble Oct 22 '11 at 07:35

wirble · Accepted Answer · 2011-10-24T15:38:56.440

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.

Dynamic input textbox not binding to autocomplete

2 Answers2