EasyAutocomplete - example

JQuery autocomplete plugin.

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"},
		...
	]
}