EasyAutocomplete - examples

JQuery autocomplete plugin.

This example shows how you can use EasyAutocomplete to create suggestions list that displays users and their email adress.




Javascript:

var options = {
    url: "resources/people.json",

    getValue: "name",

    template: {
        type: "description",
        fields: {
            description: "email"
        }
    },

    list: {
        match: {
            enabled: true
        }
    },

    theme: "plate-dark"
};

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

HTML:

<input id="example-mail"/>

people.json

[
  {
    "name": "Declan Haley",
    "email": "Cras.lorem.lorem@nonquam.ca"
  },
  {
    "name": "Francis Marsh",
    "email": "neque@arcu.edu"
  },
  {
    "name": "Gage Figueroa",
    "email": "Sed.auctor.odio@magnis.ca"
  },
  {
    "name": "Asher Gay",
    "email": "Phasellus@nonsapien.ca"
  },
    ...
]


Here you can see example, that contains data from two sources. List presents heroes from two categories: Marvel heroes and DC Comics heroes.




Javascript:

var options = {

    url: "resources/heroes.json",

    categories: [{
        listLocation: "marvel",
        maxNumberOfElements: 4,
        header: "Marvel - heroes"
    }, {
        listLocation: "dc-comics",
        maxNumberOfElements: 4,
        header: "DC Comics - heroes"
    }],

    getValue: function(element) {
        return element.character;
    },

    template: {
        type: "description",
        fields: {
            description: "realName"
        }
    },

    list: {
        maxNumberOfElements: 8,
        match: {
            enabled: true
        },
        sort: {
            enabled: true
        }
    },

    theme: "square"
};

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

HTML:

<input id="example-heroes" placeholder="Heroes" />

heroes.json

{
	"marvel": [
		{"character": "Superman", "realName": "Clark Kent"},
		{"character": "Batman", "realName": "Bruce Wayne"},
		{"character": "Wonder Woman", "realName": "Diana Prince"},
		...
	],
	"dc-comics": [
		{"character": "Daredevil", "realName": "Matt Murdock"},
		{"character": "Captain America", "realName": "Steven Rogers"},
		{"character": "Spider-Man", "realName": "Peter Parker"},
		...
	]
}


This example shows how you can use EasyAutocomplete with ajax POST requests.




Javascript:

var options = {

  url: function(phrase) {
    return "api/countrySearch.php";
  },

  getValue: function(element) {
    return element.name;
  },

  ajaxSettings: {
    dataType: "json",
    method: "POST",
    data: {
      dataType: "json"
    }
  },

  preparePostData: function(data) {
    data.phrase = $("#example-ajax-post").val();
    return data;
  },

  requestDelay: 400
};

$("#example-ajax-post").easyAutocomplete(options);

HTML:

<input id="example-ajax-post"/>

Search response

[
  {
    "name": "AFGHANISTAN"
  },
  {
    "name": "ALBANIA"
  },
  {
    "name": "ALGERIA"
  },
  {
    "name": "AMERICAN SAMOA"
  },
  {
    "name": "ANDORRA"
  },
  ...
]


EasyAutocomplete uses jquery $.ajax function for performing an asynchronous HTTP (ajax) request. If you want to use POST method to retrieve autocomplete items from remote source, you need to set object ajaxSettings property (more about it).

ajaxSettings: { dataType: "json", method: "POST", data: { dataType: "json" } }

  • dataType - the type of data that you're expecting back from the server
  • method - the HTTP method to use for the request
  • data - data to be sent to the server

To add some dynamic data to POST request, you need to use function preparePostData. This is function is invoked just before sending ajax request, so data is dynamically assigned to request. In this example you can see, that input field value is added to POST data.

preparePostData: function(data) { data.phrase = $("#example-ajax-post").val(); return data; }

In the example below you can see how to use EasyAutocomplete plugin to interact with other elements on website.

When user selects one element from suggestion list, that elements value is inserted into another input. In this case when user selects one of the x-men characters, his/hers real name will appear in second text field.




Javascript:

var options = {

    url: "resources/xmen.json",

    getValue: function(element) {
        return element.character;
    },

    list: {
        onSelectItemEvent: function() {
            var selectedItemValue = $("#inputOne").getSelectedItemData().realName;

            $("#inputTwo").val(selectedItemValue).trigger("change");
        },
        onHideListEvent: function() {
        	$("#inputTwo").val("").trigger("change");
    	}
    }
};

$("#inputOne").easyAutocomplete(options);

HTML:

<input id="inputOne" placeholder="X-men character" />
<input id="inputTwo" placeholder="Real name" />

X-men.json

[
    {"character": "Cyclops", "realName": "Scott Summers"},
    {"character": "Professor X", "realName": "Charles Francis Xavier"},
    {"character": "Mystique", "realName": "Raven Darkholme"},
    {"character": "Magneto", "realName": "Max Eisenhardt"},
    {"character": "Storm", "realName": "Ororo Monroe"},
    {"character": "Wolverine", "realName": "James Howlett"}
]


This example uses function .getSelectedItemData(), that simply returns selected item data. When users selects first item from list, function .getSelectedItemData() returns object {"character": "Cyclops", "realName": "Scott Summers"}.

So in this example when user selects one of the characters from autocomplete list, function .getSelectedItemData() returns the data item and lets aquire other data fields, in this case realName.

Function onSelectItemEvent is invoked when item from autocomplete list is selected(read more in guide - event). This function first gets selected item data and inserts this value in another text field "#inputTwo".

Field "#inputTwo" is cleared, when list disappears, so when event onHideListEvent is fired.

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.

EasyAutomplete plugin can be used to display list of links, where each suggestion is an anchor link to specific website.




Javascript:

var options = {
    url: "resources/page-navigation.json",

    getValue: "text",

    template: {
        type: "links",
        fields: {
            link: "website-link"
        }
    },

    theme: "plate-dark"
};

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

HTML:

<input id="example-links"/>

page-navigation.json

[
  {
    "text": "Home",
    "website-link": "http://easyautocomplete.com/"
  },
  {
    "text": "Guide",
    "website-link": "http://easyautocomplete.com/guide"
  },
  {
    "text": "Themes",
    "website-link": "http://easyautocomplete.com/themes"
  },
    ...
]