Question

I have a jQuery autocomplete that works fine making the suggestions but when I click on an item in the suggestion list I can’t get any event to fire.

I also have a keyup even on the same textbox to fill a listbox with data based on the input. What I need to happen is fire the same thing that fires on keyup when an autocomplete suggestion is clicked. It works with down arrow selection but not mouse click.

Here is the asp.net code:

<asp:TextBox ID="txtSearch" runat="server" Width="450px" />

This is the jquery for the autocomplete:

$("#<%=txtSearch.ClientID %>").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '../WebServices/ModelSearch.asmx/JquerySearchSrn',
                data: "{ 'prefixText': '" + request.term + "'}",
                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() {
            debugger;
            $('#<%=lsResults.ClientID %>').children().remove();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                //data: "{ prefixText: '" + $('#<%=txtSearch.ClientID %>').val() + "', count: '5'}",
                data: "{ sText: '" + $('#<%=txtSearch.ClientID %>').val() + "', sFilter: '" + $('#<%=ddlProductLine.ClientID %>').val() + "'}",
                url: "../WebServices/ModelSearch.asmx/GetResults",
                dataType: "json",
                success: function(data) {
                    //debugger;
                    var results = data.d;
                    //alert(results.length.toString());
                    if (results.length > 0) {
                        var listItems = [];
                        var j = 1;
                        //for (var i in results) {
                        for (i = 0; i < results.length; i += 2) {
                            //debugger;
                            listItems.push('<option value="' +
                            results[i] + '">' + results[j]
                            + '</option>');
                            //key + '">' + results[key].text
                            //i++;
                            j += 2;
                        }
                        $('#<%=lsResults.ClientID %>').append(listItems.join(''));
                        $('#<%=lsResults.ClientID %>').attr('size', 10);
                        /* test event.type and event.target to capture only select control changes */
                    }
                },
                error: function(response) {
                    alert(response.responseText);
                }
            });
        },

        minLength: 2
    });

I also have this as the keyup event for txtSearch:

$('#<%=txtSearch.ClientID %>').keyup(function() {

        if ($('#<%=txtSearch.ClientID %>').val().length > 1) {
            $('#<%=lsResults.ClientID %>').children().remove();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                //data: "{ prefixText: '" + $('#<%=txtSearch.ClientID %>').val() + "', count: '5'}",
                data: "{ sText: '" + $('#<%=txtSearch.ClientID %>').val() + "', sFilter: '" + $('#<%=ddlProductLine.ClientID %>').val() + "'}",
                url: "../WebServices/ModelSearch.asmx/GetResults",
                dataType: "json",
                success: function(data) {
                    //debugger;
                    var results = data.d;
                    //alert(results.length.toString());
                    if (results.length > 0) {
                        var listItems = [];
                        var j = 1;
                        //for (var i in results) {
                        for (i = 0; i < results.length; i += 2) {
                            //debugger;
                            listItems.push('<option value="' +
                            results[i] + '">' + results[j]
                            + '</option>');
                            //key + '">' + results[key].text
                            //i++;
                            j += 2;
                        }
                        $('#<%=lsResults.ClientID %>').append(listItems.join(''));
                        $('#<%=lsResults.ClientID %>').attr('size', 10);
                        /* test event.type and event.target to capture only select control changes */
                    }
                },
                error: function(response) {
                    alert(response.responseText);
                }
            });
        }

    });

I have tried just calling the .keyup function of the txtSearch so I wouldn’t have to duplicate the code but it doesn’t work unless I do it in Chrome’s JavaScript console. How can I make this function properly?

Answer 1

Thank you for your reply. I tried to select event but it wouldn’t work for me.

I solved it by targeting the class of the li tags that are rendered as suggestions. The select function wouldn’t fire the keyup event I needed to call. This is what I did:

$('.ui-corner-all').click(function() {
   $('#<%=txtSearch.ClientID %>').keyup();
});