EasyAutocomplete - themes

JQuery autocomplete plugin.

Have a look at these autocomplete themes !

Square



Javascript:

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

	getValue: "name",

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

	theme: "square"

};

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

HTML:

<input id="square"/>

countries.json

[ 
  {"name": "Afghanistan", "code": "AF"}, 
  {"name": "Aland Islands", "code": "AX"}, 
  {"name": "Albania", "code": "AL"}, 
  {"name": "Algeria", "code": "DZ"}, 
  {"name": "American Samoa", "code": "AS"}, 
  ...
 ]

CSS:

.eac-square input {
  background-image: url("images/icon_search.png");
  background-repeat: no-repeat;
  background-position: right 10px center;
}


If you want to use this theme, you have to include EasyAutocomplete css theme file.

In this example I have used search icon.

Square theme uses Roboto font, which you can find in google font service: Roboto font.

Round



Javascript:

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

	getValue: "name",

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

		showAnimation: {
			type: "slide",
			time: 300
		},
		hideAnimation: {
			type: "slide",
			time: 300
		}
	},

	theme: "round"

};

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

HTML:

<input id="round"/>

countries.json

[ 
  {"name": "Afghanistan", "code": "AF"}, 
  {"name": "Aland Islands", "code": "AX"}, 
  {"name": "Albania", "code": "AL"}, 
  {"name": "Algeria", "code": "DZ"}, 
  {"name": "American Samoa", "code": "AS"}, 
  ...
 ]


Round theme uses Open Sans font, which you can find in google font service: Open Sans font.

Plate dark



Javascript:

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

	getValue: "name",

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

	theme: "plate-dark"

};

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

HTML:

<input id="plate"/>

countries.json

[ 
  {"name": "Afghanistan", "code": "AF"}, 
  {"name": "Aland Islands", "code": "AX"}, 
  {"name": "Albania", "code": "AL"}, 
  {"name": "Algeria", "code": "DZ"}, 
  {"name": "American Samoa", "code": "AS"}, 
  ...
 ]


Dark plate is really cool looking theme for autosuggest list display. It's different from simple white/grey common look.

Funky



Javascript:

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

	getValue: "name",

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

		showAnimation: {
			type: "fade"
		},
		hideAnimation: {
			type: "fade"
		}
	},

	theme: "funky"

};

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

HTML:

<input id="funky"/>

countries.json

[ 
  {"name": "Afghanistan", "code": "AF"}, 
  {"name": "Aland Islands", "code": "AX"}, 
  {"name": "Albania", "code": "AL"}, 
  {"name": "Algeria", "code": "DZ"}, 
  {"name": "American Samoa", "code": "AS"}, 
  ...
 ]


Round theme uses Inconsolata font, which you can find in google font service: Inconsolata font.





Easy autocomplete - additional themes file

EasyAutocomplete has a couple of additional cool looking themes. If any of them seems interesting to you, feel free to use them. Additional themes are located in file easy-autocomplete.themes.css. In order to use them, add this file in header section of your page. 

<!-- CSS Themes file -->
<link rel="stylesheet" href="path/to/easy-autocomplete.themes.min.css">

More information about how to use this plugin, can be found in EasyAutocomplete - jquery autocomplete - guide section.