How to use DuckDuckGo’s search autocomplete suggestions

I’m transitioning my personal search suggestions from google to duckduckgo, but I’m missing something simple to make it work. I’m using jQuery-UI’s autocomplete framework.

My search form

<form action="https://duckduckgo.com/?q=" method="post" id="search">
    <input type="text" name="query" value="" autocomplete="off">
    <button type="submit">Search</button>
</form>

My jQuery

$( "#search input[type=text]" ).autocomplete(
{
    delay: 0,
    minLength: 1,
    position: { my: "left top-3" },
    source: function( request, response )
    {
     // var suggestURL = "https://www.google.com/complete/search?client=firefox&q=%QUERY";
        var suggestURL = "https://duckduckgo.com/ac/?q=%QUERY&type=list";

        suggestURL = suggestURL.replace( "%QUERY", request.term );

        $.ajax({
            method: "GET",
            dataType: "jsonp",
            jsonpCallback: "jsonCallback",
            url: suggestURL,
            success: function( data )
            {
                response( data[1] );
            },
            error: function( jqXHR, textStatus, errorThrown )
            {
                console.log( textStatus, errorThrown );
            }
    }
});

The query for google returns:

https://suggestqueries.google.com/complete/search?client=firefox&q=foobar&callback=jsonCallback&_=1600956954436

jsonCallback && jsonCallback(["foobar",["foobar","foobar meaning","foobar google","foobar challenge","foobar2000 skins","foobar2k","foobar2000 themes","foobar2000 download","foobar2000 mac","foobar themes"],[],{"google:suggestsubtypes":[[433],[],[],[],[],[],[],[],[],[]]}])

The query for duckduckgo returns:

https://ac.duckduckgo.com/ac/?q=foobar&type=list&callback=jsonCallback&_=1600956892202

["foobar",["foobar2000","foobar","foobar2000 download","foobar ape","foobar2000 layout","foobar2000 decoder","foobar2000 tak","foobar2000 dsp"]]

The difference between the two seems to be jsonCallback && jsonCallback([data]) is included in the google query and I don’t understand why they’re different or how to fix it.

EDIT 1

After adding some error handling to the js, the error I’m getting is:

parsererror Error: jsonCallback was not called

EDIT 2

After digging into this a bit more, I don’t think DDG’s server allows it. It’s my understanding that their server needs to send an appropriate response and I don’t think it’s doing so.

Answer

Please see: https://duckduckgo.com/api

To consume it yourself, you can use one of the language libraries listed below or simply add ‘&format=json’ (or xml if you prefer) onto any query URL in the api subdomain, e.g.

https://api.duckduckgo.com/?q=DuckDuckGo&format=json

Here are the requirements for use:

• Attribution in each place you use our API for both us and any underlying source. For the source, you can link to the source’s relevant detail page. For us, you can say Results from DuckDuckGo with our logo (and link to the specific result page).
• Non-commercial use unless you get email approval from us (though we’re generally fine with anything that isn’t sketchy).
• Use a descriptive t parameter, i.e. append &t=nameofapp to your requests.

Our overall goal is to get more people using DuckDuckGo, so please keep that in mind as well.

q: query

format: output format (json or xml)

If format=='json', you can also pass:
callback: function to callback (JSONP format)

This works successfully with JSONP: https://jsfiddle.net/Twisty/rqdtv9sn/86/

The problem here is that these are not suggestions and the URL for those, https://ac.duckduckgo.com/ac/ does not want to play nice with CORS. You can fudge around it with FETCH API yet this just proceed with the Promise even if the request fails or can’t be parsed.

So until DDG offers a Suggestion API, you’re mostly out of luck.

Some potential other options are discussed here: https://www.sitepoint.com/jsonp-examples/

var script = $("<script />", {
    src: "https://ac.duckduckgo.com/ac/?q=" + req.term,
    type: "application/json"
  }
);

Although that works, it doesn’t help us much, as we have no way of getting at the data it contains.

Example: https://jsfiddle.net/Twisty/rqdtv9sn/89/

The browser shows the response but then you get a Parse Error.