Completamento automatico Ajax/Jquery con dati JSON

Question

Sto provando ad impostare il campo del completamento automatico dell'interfaccia utente Jquery per ottenere dati da una connessione Ajax. Ecco il mio codice finora:

  $("#mainIngredientAutoComplete").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "../api/IngredientChoices", 
         dataType: "json", 
         success: function (data) { 
          response(function (item) { 
           return { 
            label: item.MainName, 
            value: item.MainItemID 
           } 
          }); 
         } 
        }); 
       } 
      }); 

Questo è il mio JSON:

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}] 

HTML:

<table id="tbl_ingredients" style="padding:0px;"> 
       <tr id="ingHeader"> 
        <td>Ingredient</td> 
        <td>Measurement</td> 
        <td>Amount</td> 
        <td><input id="mainIngredientAutoComplete" /></td> 
        <td></td> 
       </tr> 
</table> 

Quando inizio a digitare "mil" (per il latte) il mio codice dà me questo errore:

EDIT:

ho fatto la modifica, che ha lavorato per un paio di tentativi, ma ora sto ottenendo un nuovo errore -

non gestita eccezione alla linea 55, colonna 25 in [URL]

0x800A1391 - Microsoft JScript runtime error: 'dati' non è definito

 $("#mainIngredientAutoComplete").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "../api/IngredientChoices", 
        dataType: "json", 
        response: ($.map(data, function(v,i){ 
         return { 
          label: v.MainName, 
          value: v.MainItemID 

         }})) 
       }); 
      } 
     }); 

Answer 1

è necessario modificare il callback successo

Fiddle.

jQuery.map consente di tradurre tutti gli elementi di un array o oggetto in una nuova serie di elementi.

Aggiornamento: Aggiungi filtro

$("#mainIngredientAutoComplete").autocomplete({ 
    source: function (request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     $.ajax({ 
      url: "../api/IngredientChoices", 
      dataType: "json", 
      success: function (data) { 
       response($.map(data, function(v,i){ 
        var text = v.MainName; 
        if (text && (!request.term || matcher.test(text))) { 
         return { 
           label: v.MainName, 
           value: v.MainItemID 
           }; 
        } 
       })); 
      } 
     }); 
    } 
});