Ajax / Jquery Autocomplete with JSON data
You need to change the success callback to
response($.map(data, function(v,i){ return { label: v.MainName, value: v.MainItemID };}));The jQuery.map helps to Translate all items in an array or object to new array of items.
Update: Add Filter
$("#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 }; } })); } }); }});