EasyAutocomplete - themes

JQuery autocomplete plugin.

Star Watch

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.


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