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）。