Question

I want to make autocomplete work on each textboxes using with an attribute “kolonadi”

When i press a key in textbox, the page alerts me “keydown enterance” but the autocomplete is not running. If I press one key more it works correctly.

How can i modify this code?

This is my dynamic input:

<input name="ctl00$MainContent$qtxt_UNVAN" type="text" id="MainContent_qtxt_UNVAN" class="textEntry2 ui-autocomplete-input" kolonadi="UNVAN" style="width:200px;" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">

This is jquery autocomplete:

$('.textEntry2').keydown(function () {
   alert("keydown enterance"); 
  var kolonadi_ = $(this).attr("kolonadi");

    $(this).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
                data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=hfCustomerId.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
});

Answer 1

I want to make autocomplate each textboxes using textbox attr “kolonadi”

Then you need to make a jQuery selector that matches that attribute:

$('input[type="text"][kolonadi!=""]').each(function() {
    // ...
});

…when I press a key in textbox, page alert me “keydown enterance” but autocomp not running. If I press one key more it runs!

The problem is that the jQuery UI .autocomplete method doesn’t immediately bring down the drop-down like you think it does. If you call it once, it converts the input field permanently into an auto-completing field.

So what your code does is check for a keypress, and if it finds it, it turns the text field into an autocomplete. Then the second time you enter a keypress, the auto-complete handler runs and your handler runs, and it gets converted into an autocomplete again.

So just call .autocomplete directly on page load, get rid of the keydown handler, and call it done. You don’t need your own key-down handler because the .autocomplete method will insert its own key-down handler.

Something like this:

var textEntry2 = $('.textEntry2');
var kolonadi_ = textEntry2.attr("kolonadi");

textEntry2.autocomplete({
    source: function(request, response) {
        $.ajax({
            url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
            data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                response($.map(data.d, function(item) {
                    return {
                        label: item.split('-')[0],
                        val: item.split('-')[1]
                    }
                }))
            },
            error: function(response) {
                alert(response.responseText);
            },
            failure: function(response) {
                alert(response.responseText);
            }
        });
    },
    select: function(e, i) {
        $("#<%=hfCustomerId.ClientID %>").val(i.item.val);
    },
    minLength: 1
});