如何讓Jquery自動完成結果事件處理程序正常工作？

Question

我寫了代碼，在用戶選擇了一些有效的（下）之後，無法使用JQuery autocomplete來激發結果函數。

結果，我的意思是結果處理函數，一個在自動完成插件中發生好選擇後觸發的函數。記錄在案here。

在我的情況下，我有一個表格，它是一個真正的表，其中每一行都是相同的，減去字段上的唯一標識號：Item1，Qty1，Desc1，然後是Item2，Qty2，Desc2等等。當用戶輸入Item1代碼時，Desc1文本應該顯示所選項目代碼的英文（Item2 - > Desc2等等）。

我使用此代碼來查找所有項目輸入並對其執行自動完成。由於某種原因，結果事件處理程序不會觸發。如果您注意到，我硬編碼了「Item1」選項，因爲我還沒有弄清楚如何選擇相應的Desc到Item1 - > Desc1，Item2 - > Desc2等項目。

我只使用了MVC Url.Content，因爲我碰巧得到它的工作。有人使用Url.Action，我認爲它更好，只需要弄明白。

隨意根據需要糾正我的使用，這是我第一次使用ASP.NET MVC/JQuery。

謝謝:)

代碼：

$(document).ready(function(){ 

    $("input[id^='Item']").autocomplete("<%= Url.Content("~/products/autocomplete")%>", { 
    dataType: 'json', 
    parse: function(data) { 
     var rows = new Array(); 
     for(var i = 0; i<data.length; i++) 
     { rows[i] = {data:data[i], value:data[i].name, result:data[i].id }; } 
     return rows; 
    }, 
    formatItem: function(row, i, n) { 
      return row.id + ' - ' + row.name; 
     }, 
    selectFirst: true, 
    //autoFill: true, 
    minChars: 2, 
    max: 30, 
    autoFill: true, 
    mustMatch: true, 
    matchContains: false, 
    scrollHeight: 100, 
    width: 300, 
    cacheLength: 1, 
    scroll: true 
    }); 

    $("Item1").result(function(event, data, formatted) { 
     $("Desc1").html(!data ? "No match!" : "Selected: " + formatted); 
    }); 
}); 

Answer 1

$(document).ready(function(){ 

    $("input[id^='Item']").autocomplete("<%= Url.Content("~/products/autocomplete")%>", { 
      dataType: 'json', 
      parse: function(data) { 
       var rows = new Array(); 
       for(var i = 0; i<data.length; i++) 
       { rows[i] = {data:data[i], value:data[i].name, result:data[i].id }; } 
       return rows; 
      }, 
      formatItem: function(row, i, n) { 
       return row.id + ' - ' + row.name; 
      }, 
      selectFirst: true, 
      //autoFill: true, 
      minChars: 2, 
      max: 30, 
      autoFill: true, 
      mustMatch: true, 
      matchContains: false, 
      scrollHeight: 100, 
      width: 300, 
      cacheLength: 1, 
      scroll: true 
    }).result(function(event, data, formatted) { 
     var n = $(this).attr("id").match(/\d+/); 
     var b = $("span[id='Desc"+n+"']") 
     b.html(!data ? "No match!" : "Selected: " + formatted); 
    }); 
});