jquery - example - datepicker bootstrap 4

Ajax/Jquery Autocompletar con datos JSON

Question

Estoy tratando de configurar mi campo de autocompletar Jquery UI para tener datos de una conexión ajax. Aquí está mi código hasta ahora:

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

Este es mi 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>

Cuando empiezo a escribir "mil" (para leche) mi código me da este error:

EDITAR:

Hice su cambio, que funcionó durante unos pocos intentos, pero ahora recibo un nuevo error:

Excepción no controlada en la línea 55, columna 25 en [URL]

0x800a1391 - Error de tiempo de ejecución de Microsoft JScript: ''datos'' no está definido

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

Debe cambiar la devolución de llamada exitosa a

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

Fiddle .

JQuery.map ayuda a traducir todos los elementos de una matriz u objeto a una nueva matriz de elementos.

Actualización: Agregar 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
};
}
}));
}
});
}
});