Question

您好我有一个jquery自动完成功能，可以很好地提出建议但是当我点击建议列表中的某个项目时，我无法触发任何事件。我甚至在同一个文本框上也有一个键盘，用基于输入的数据填充列表框。当我点击自动完成建议时，我需要发生的事情就是触发与keyup相同的事情。它适用于向下箭头选择，但不适用于鼠标点击。

这是asp.net代码：

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

这是自动完成的jquery：

$("#<%=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
    });

我也将此作为txtSearch的keyup事件：

$('#<%=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);
                }
            });
        }

    });

我试过调用txtSearch的.keyup函数，所以我不必复制代码，但除非我在Chrome的Javascript控制台中执行，否则它不起作用。有没有人有任何建议或者如何正确地使用这个功能？

谢谢你，森

Answer 1

jQuery UI插件会触发某些操作的事件。事件的名称以插件名称为前缀。因此，对于select事件，您可以绑定到`autocompleteselect'。

通过查看源代码，您可以看到select和change事件被触发。

var myHandler = function() { ... };


$("#<%=txtSearch.ClientID %>")
   .autocomplete({...})
   .bind('autocompleteselect', myHandler);

编辑：误解了一下这个问题，希望我现在就明白了。如果您希望在select处理程序和keyup中调用相同的函数，请按上述方式声明它并为两个处理程序指定它：

var getResults= function() { ... /* execute ajax */ ... };


$("#<%=txtSearch.ClientID %>")
   .autocomplete({
       source: [],
       select: function() {
           ...
           getResults();
           ...
       }
    })
   .keyup(function() {
       // check the type of key that was pressed
       // (to avoid initiate an ajax request if the user pushed "num lock" for inst.)

       if (keyIsOk) {

           // work with a setTimeout, to try avoid messing up if a user types too fast
           getResults();
       }
   });

虽然在每个keyup上发出ajax请求可能不是一个好主意，但这会产生很多请求。

d

Answer 2

感谢您的回复。我试图选择事件，但它对我不起作用。

我通过定位作为建议呈现的li标记的类来解决它。 select函数不会触发我需要调用的keyup事件。这就是我所做的：

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

jquery ui自动完成建议列表单击事件

2 个答案: