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

Question

嗨我有一个jquery自动完成工作正常提出的建议，但当我点击建议列表中的项目我无法得到任何事件触发。即使在相同的文本框中，我也可以使用键盘来填充基于输入数据的列表框。我需要发生的事情是点击自动完成建议时触发与关键点相同的事情。它适用于向下箭头选择，但不是鼠标点击。

这里是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控制台中执行。 有没有人有任何建议或ieas如何使这个功能正常？

谢谢 弥敦道

Answer 1

谢谢您的回复。我试图选择事件，但它不适合我。

我解决了这个问题，通过定位作为建议呈现的li标签的类。 select函数不会触发我需要调用的keyup事件。这是我做的：

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

Answer 2

jQuery UI的插件触发某些行动的事件。事件的名称前面加上了插件名称。因此，对于select事件，您可以绑定到`autocompleteselect'。

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

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


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

---

编辑： missunderstood有点问题，希望我得到它现在。如果你想同样的功能在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）。