EasyAutocomplete - example

JQuery autocomplete plugin.

This is interesting autocomplete example, where input is connected to duckduckgo search engine. In that case suggestions displayed on the autosuggest list are actually duckduckgo search results for phrase inserted in input field. Try it for yourself, type something and check what will be the response.




Javascript:

var options = {
    url: function(phrase) { 
        if (phrase !== "") {
            return "http://api.duckduckgo.com/?q=" + phrase + "&format=json";    
        } else {
            //duckduckgo doesn't support empty strings
            return "http://api.duckduckgo.com/?q=empty&format=json";
        }
    },

    getValue: "Text",

    ajaxSettings: {
        dataType: "jsonp"
    },

    listLocation: "RelatedTopics",

    requestDelay: 300,

    theme: "round"
};

$("#example-ddg").easyAutocomplete(options);

HTML:

<input id="example-ddg"/>

Search response

{
 "DefinitionSource" : "",
 "Heading" : "National Basketball Association",
 "ImageWidth" : 133,
 "RelatedTopics" : [
 {
  "Result" : "<a href='https://duckduckgo.com/c/National_Basketball_Association'>National Basketball Association Kategoria</a>",
  "Icon" : {
   "URL" : "",
   "Height" : "",
   "Width" : ""
   },
   "FirstURL" : "https://duckduckgo.com/c/National_Basketball_Association",
   "Text" : "National Basketball Association Kategoria"
  },
  ...
]


For this example to work, input fields need to be connected to an api located on different domain(in this case http://api.duckduckgo.com). That means simple jquery ajax method cannot be used, you have to set ajaxSettings.dataType: "jsonp"(you can read more about it in guide section - jquery ajax settings).

This example needs to have parameter listLocation setted to RelatedTopics, because in json search response array with autosuggestions that we want to show is located in object property RelatedTopics. More about this you can find in guide section - listLocation.