Javamav February 2016

JQuery autocomplete output issue

I have seen this question posted numerous times and for the life of me I cannot seem to get this one figured out. I have a remote source I am using to get the JSON, and I am able to see that JSON being returned in the console, I just cannot get it to output. What I need to have is the "Description:" and the "State" to output to the autocomplete. Can someone please show me where I am going wrong?

Here is my function:

$(function() {
        $( "#locationSearch" ).autocomplete({
            source: function( request, response ) {
            $.ajax({
                type: "GET",
                url: "https://www.datasample.com/Services/AutoComplete.ashx",
                dataType: "jsonp",
                data: {
                  term: request.term,
                },
                success: function( data ) {
                    response( $.map( data.results, function( result ) {
                        return {
                            label: result.Description,
                            value: result.State
                        }
                    }));
                }
            });
            },
            minLength: 3
        });
    });

Here is the JSON being returned:

{"term":"Boston","results":[{"Description":"Boston, MA","Lat":0.0,"Lng":0.0,"Category":"City","Radius":null,"State":"MA"},{"Description":"Boston, NY","Lat":0.0,"Lng":0.0,"Category":"City","Radius":null,"State":"NY"},{"Description":"Boston Heights, OH","Lat":0.0,"Lng":0.0,"Category":"City","Radius":null,"State":"OH"}]}

Here is the HTML:

<input name="locationSearch" id="locationSearch" type="text" />

Answers


Simon McClive February 2016

Here is an example

data = {"term":"Boston","results":[{"Description":"Boston, MA","Lat":0.0,"Lng":0.0,"Category":"City","Radius":null,"State":"MA"},{"Description":"Boston, NY","Lat":0.0,"Lng":0.0,"Category":"City","Radius":null,"State":"NY"},{"Description":"Boston Heights, OH","Lat":0.0,"Lng":0.0,"Category":"City","Radius":null,"State":"OH"}]};

$.map(data.results, function(result){
   return {
        label: result.Description,
        value: result.State
   }
});

outputs

"[{"label":"Boston, MA","value":"MA"},{"label":"Boston, NY","value":"NY"},{"label":"Boston Heights, OH","value":"OH"}]"

Post Status

Asked in February 2016
Viewed 1,185 times
Voted 7
Answered 1 times

Search




Leave an answer