Autouzupełnianie Ajax/Jquery z danymi JSON

Question

Próbuję skonfigurować pole autouzupełniania interfejsu JQuery dla danych z połączenia ajax. Oto mój kod do tej pory:

  $("#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 
           } 
          }); 
         } 
        }); 
       } 
      }); 

To mój 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> 

Kiedy zaczniesz wpisywać "MIL" (na mleku) mój kod daje mi ten błąd:

EDIT:

zrobiłem swoją zmianę, która pracowała dla kilku próbach, ale teraz jestem z dostaniem nowego błędu -

nieobsługiwany wyjątek w wierszu 55, kolumna 25 w [URL]

0x800a1391 - błąd czasu wykonywania Microsoft JScript: 'dane' jest niezdefiniowany

 $("#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

trzeba zmienić zwrotnego sukces

response($.map(data, function(v,i){ 
    return { 
       label: v.MainName, 
       value: v.MainItemID 
       }; 
})); 

Fiddle.

The jQuery.map pomaga Tłumaczyć wszystkie elementy w tablicy lub obiekcie na nowy zestaw elementów.

Aktualizacja: Dodaj filtr

$("#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 
           }; 
        } 
       })); 
      } 
     }); 
    } 
});