Assign JSON to autocomplete

Question

I have the following string representation of an actual JSON object returned from my service:

[
  {
    "label": "#1 Pizza [99999]",
    "value": "99999"
  },
  {
    "label": "001 Test Facility [99998]",
    "value": "99998"
  }
]

I am trying to put this in a jQuery autocomplete. But I don't have a clear idea why I don't see the data in that control.

I have looked all over for this and asked other questions. I have been working on this for DAYS and I am SO close so please help....

Here is my markup/script

<script type="text/javascript">

function processFacilities(data) {
    response($.map(data, function (value, key) {
        alert(data);
        return {
            label: value,
            value: key
        };
    }));
};

$('#tags').autocomplete({
    source: function (request, response) {
        $.getJSON('FacilitiesAsync', 'sourceDb=myDb', processFacilities);
    },
    minLength: 2,
    delay: 100
});

</script>

My class is returning the label and value as I saw was needed from the post below. What is different here is that my JSON data does not have something in front of it to identify it, for example: ["facilities": {etc...}]

jQuery UI autocomplete with JSON

have you tried out the code in this example http://jqueryui.com/autocomplete/#remote-jsonp. `response` is your root element — alex, Nov 19 '13 at 09:41

score 1 · Accepted Answer · answered Nov 19 '13 at 10:03

This is my implementation, and it works fine...

  $("#autocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/api/controller/",
                type: 'GET',
                cache: false,
                data: request,
                dataType: 'json',
                success: function (json) {
                    // call autocomplete callback method with results 
                    response($.map(json, function (name) {
                        return {
                            label: name.Name,
                            value: name.ID
                        };
                    }));
                },
                error: function (xmlHttpRequest, textStatus, errorThrown) {
                    $("#autocomplete").text(textStatus + ', ' + errorThrown);
                }
            });
        },
        select: function (event, ui) {
            $('#autocomplete').val(ui.item.label);
            $('#selectedLocationId').val(ui.item.value);
            return false;
        },
        messages: {
            noResults: '',
            results: function () {
            }
        }
    });

To translate this to your version...

$("#autocomplete").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "FacilitiesAsync/",
            type: 'GET',
            cache: false,
            data: request,
            dataType: 'json',
            success: function (json) {
                // call autocomplete callback method with results 
                response($.map(json, function (name) {
                    return {
                        label: name.Name,
                        value: name.ID
                    };
                }));
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                $("#autocomplete").text(textStatus + ', ' + errorThrown);
            }
        });
    },
    select: function (event, ui) {
        $('#autocomplete').val(ui.item.label);
        return false;
    },
    messages: {
        noResults: '',
        results: function () {
        }
    }
});

I implemented your code and I don't see the Task being called in the code-behind now. I put some alerts in to see if it was called and it is not. I would like to call this when the page loads so I can get the data in the background and load it to the input control — Brian Evans, Nov 19 '13 at 10:32
Ok, now I am seeing something! I put your code inside a $(document).ready(function() {}); And now I am seeing something show up in the autocomplete.... — Brian Evans, Nov 19 '13 at 10:35

score 1 · Answer 2 · answered Nov 19 '13 at 10:10

This should work:

$('#tags').autocomplete({
    source: "/path/to/script",
    minLength: 2,
    delay: 100
});

When the source option is a string:

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to http://example.com and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

Assign JSON to autocomplete

2 Answers2