Custom box with autocomplete from Google/Bing. Is there any way to read the received json file?

Question

I try to build a webpage with a search box. I want to take the autocomplete options from Bing (for example).

It is possible to get the autocomplete from bing by:

http://api.bing.com/osjson.aspx?query=YOUR_QUERY

I wrote some code with an autocomplete widget, asking to get the json as jsonp, and I succeed to see (in Fiddler) that the json arrives. But because it arrives only as a json, and not in the required format, I get parseError. (I saw it in the error function. The success function is not called)

The relevant part from my code is:

    $( "#mySesearchBox" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://api.bing.com/osjson.aspx?query=" + request.term,
          dataType: "jsonp",
          ...

Is there any way to overcome this problem?

I thought about running some server that will get such a query, will ask for the json from Bing and will respond in the required format. However, I prefer more simple solution.

Any advice?

Answer 1

A working demo full : http://jsfiddle.net/LxXJz/

This uses: http://api.bing.net/qson.aspx

or

Here you go "test" like this Demo : http://jsfiddle.net/zNUBc/

• .getJSON : http://api.jquery.com/jquery.getjson/

Flick your whole code, or a fiddle I might sort it out for you :) Hope this demo help you.

code

var url = 'http://api.bing.com/osjson.aspx?JsonType=callback&JsonCallback=?';
$.getJSON(url, {
    query: 'hulk'
}, function (data) {
    document.write(data)
});

Update 16 hours latter :)

Here is the solution using : http://api.bing.com/osjson.aspx

Demo => http://jsfiddle.net/pW6LZ/

see this screeshot carefully:

Answer 2

Updated Code that works after the update by bing:

success: function (data) {
    console.log(data);
    var suggestions = [];
    $.each(data[1], function (i, val) {
        suggestions.push(val);
    });
    //This returns the top 5 suggestions, instead of a list of over 20 suggestions.
    response(suggestions.slice(0, 5));