Ajax / Jquery Autocomplete with JSON data

Question

I am trying to setup my Jquery UI autocomplete field to have data from an ajax connection. Here is my code so far:

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

This is my 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>

When I start to type "mil" (for milk) my code gives me this error:

enter image description here

EDIT:

I made your change, which worked for a few attempts but now I am getting a new error -

Unhandled exception at line 55, column 25 in [URL]

0x800a1391 - Microsoft JScript runtime error: 'data' is undefined

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

                        }}))
                });
            }
        });

Arun P Johny · Accepted Answer · 2013-01-24T05:36:22.500

22

You need to change the success callback to

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

Fiddle.

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

edited Jan 24 '13 at 05:36

answered Jan 24 '13 at 03:15

Arun P Johny

384,651
66
527
531

1

+1: You can also use `$.map` instead of pushing the items into a new array yourself. – Andrew Whitaker Jan 24 '13 at 04:48
Actually, The drop down appears but it isn't automatically filtering down the results. Mi give me cheese. Any idea why? – Yecats Jan 24 '13 at 05:10
Because I han't added the filter condition – Arun P Johny Jan 24 '13 at 05:17
@Yecats I would prefer to sent the `request.term` data to server and do the filtering there else we might transferring lot of unused data from server affecting the response time – Arun P Johny Jan 24 '13 at 05:56
Remember to do parse the JSON string in the success callback. Use $.parseJSON on the string and map that array. – Karlth Jan 21 '17 at 14:09
i used above to extract data and returned those, there have correct data from response but shows "No search results." text, is there have other reasons for happen this – Suneth Kalhara Sep 16 '18 at 04:27

Ajax / Jquery Autocomplete with JSON data

1 Answers1

Linked