Comment faire fonctionner le gestionnaire d'événement de résultat Jquery Autocomplete?

Question

J'ai écrit un code qui ne parvient pas à utiliser le JQuery autocomplete pour déclencher une fonction de résultat après que l'utilisateur ait sélectionné quelque chose de valide (ci-dessous). Par résultat, je veux dire gestionnaire de résultats, une fonction qui se déclenche après une bonne sélection dans le plugin de saisie semi-automatique. Documenté here.

Dans mon cas, j'ai un formulaire qui est vraiment une table où chaque ligne est la même, moins les identifiants uniques sur les champs: Item1, Qty1, Desc1, puis Item2, Qty2, Desc2, et ainsi de suite. Lorsque l'utilisateur tape un code Item1, le texte Desc1 doit afficher l'anglais du code article sélectionné (Item2 -> Desc2, et ainsi de suite).

J'ai utilisé ce code pour trouver toutes les entrées d'élément et claquer la saisie semi-automatique dessus. Le gestionnaire d'événements de résultat ne se déclenche pas pour une raison quelconque. Si vous remarquez, j'ai codé en dur la sélection "Item1" parce que je n'ai pas compris comment sélectionner le Desc correspondant à l'Item où Item1 -> Desc1, Item2 -> Desc2, et ainsi de suite. J'ai utilisé le MVC Url.Content seulement parce que je l'ai fonctionné. Quelqu'un a utilisé Url.Action, ce qui, je pense, est mieux, il suffit de le comprendre.

N'hésitez pas à corriger mon utilisation si nécessaire, c'est ma première fois avec ASP.NET MVC/JQuery.

Merci :)

Le 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); 
    }); 
});