如何让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); 
    }); 
});