Using devbridge autocomplete and wunderground autocomplete API

Question

I'm attempting to use the devbridge jquery autocomplete lib to pull wunderground.com's autocomplete API, and I keep getting held up. Whether I attach a cb to the serviceUrl or not, it can't parse the returned json. The response is prefixed with "{RESULTS: [{ array data I want to use }]}".

When I use the autocomplete code provided in the docs, it says "Uncaught SyntaxError: Unexpected token :"

When I apply the &cb=myresults to the serviceUrl, I get "Uncaught ReferenceError: myresults is not defined"

My code is:

var options, a;
$(function(){
    options = {
        serviceUrl:'http://autocomplete.wunderground.com/aq?c=US&format=jsonp&cb=myresults',
        minChars: 7,
        dataType : "jsonp",
        transformResult: function(response) {
            response = JSON.parse(response);
                return {
                    suggestions: $.map(response.myData, function(dataItem) {
                        return { value: dataItem.name, data: dataItem.zmw };
                })
            };
        }
    };
    a = $('#autoLocation').autocomplete(options);
});

The wunderground API is : http://www.wunderground.com/weather/api/d/docs?d=autocomplete-api The devbridge autocomplete git is : https://github.com/devbridge/jQuery-Autocomplete A sample response from wunderground is : http://autocomplete.wunderground.com/aq?c=US&format=jsonp&cb=myresults&query=san%20f

I've been at a loss for a few days, and I'm sure I'm looking over something extremely simple. Any help or guidance is much appreciated.

Answer 1

To get this working you need modify source because jquery jsonp default callaback query string key is not "cb", but "callback". So in the autocomplete source add: jsonp: 'cb'

        that.currentRequest = $.ajax({
            url: serviceUrl,
            data: params,
            type: options.type,
            jsonp: 'cb',
            dataType: options.dataType
        }).done(function (data) {

Then your code should be:

var options, a;

$(function(){
    options = {
        serviceUrl:'http://autocomplete.wunderground.com/aq?c=US&format=jsonp',
        minChars: 2,
        dataType : "jsonp",
        transformResult: function(response) {
                console.log('response', response);
                return {
                    suggestions: $.map(response.RESULTS, function(dataItem) {
                        return { value: dataItem.name, data: dataItem.zmw };
                })
            };
        }
    };
    a = $('#autoLocation').autocomplete(options);
});

This is working fine for me.