Question

I am trying to use jquery autocomplete plugin, I want it to suggest ItemCodes as user types…

The problem is its not showing autocomplete box/frame/….

Just to make sure webmethod returns data on every keyup event, I assigned data to a div element, and it works as it should.

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        var strItmCodes;

        $("#txtItmCode").keyup(function() {
            var search;
            search = $("#txtItmCode").val();

            if (search.length > 0) {
                $.ajax({
                    type: "POST",
                    url: "Journal.aspx/loadData",
                    contentType: "application/json; charset=utf-8",
                    data: "{'Like':'" + $('#txtItmCode').val() + "'}",
                    dataType: "json",
                    success: function(retval) {
                        strItmCodes = retval.d.split("|");

                        $("#txtItmCode").autocomplete(strItmCodes);
                        $("#suggest").html(retval.d); //elemet 'suggest' is a div
                    }
                });
            }
        });
    });
</script>

Modified

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        //$("#txtItmCode").autocomplete({url: "Journal.aspx/loadData" });

        $("#txtItmCode").keyup(function() {
            $("#txtItmCode").autocomplete({url: "Journal.aspx/loadData" });
        });
    });
</script>

Answer 1

I think you should enable the autocomplete plugin before the first keypress, then the plugin will add the event handlers.

Assuming you use the original autocomplete plugin:

$("#txtItmCode").autocomplete({url: "Journal.aspx/loadData"});

And make sure you service can reply to the GET request formatted by the plugin.