How to get the Jquery Autocomplete result event handler to work? - jquery-plugins

Question

I wrote code that fails to use the JQuery autocomplete to fire a result function after the user selects something valid (below).
By result, I mean result handler, a function that fires after a good selection happens in the autocomplete plugin. Documented here.
In my case, I have a form that is really a table where each row is the same, minus the unique ids on the fields: Item1, Qty1, Desc1, then Item2, Qty2, Desc2, and so on. When the user types in an Item1 code, the Desc1 text should display the English of the item code selected (Item2 -> Desc2, and so on).
I used this code to find all the Item inputs and slap the autocomplete on it. The result event handler doesn't fire for some reason. If you notice, I hard coded the "Item1" selection because I haven't figured out how to select the corresponding Desc to the Item where Item1 -> Desc1, Item2 -> Desc2, and so on.
I used the MVC Url.Content only because I happen to get it working. Someone used Url.Action, which I think is better, just have to figure it out.
Feel free to correct my use as necessary, this is my first time with ASP.NET MVC / JQuery.
Thank you :)
The code:
$(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);
});
});