Javascript autocomplete

The html
autocomplete country script

window.onload = function() {
		AC.init("stateField");
	}
		
	
<div class="container">
		Country: 
</div>

The CSS

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #FFF;
	font-family: Arial;
	font-size: 20px;
}
.container {
	display: block;
	width: 300px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}
#stateField {
	width: 300px;
	display: block;
	padding: 8px;
	border: solid 2px #999;
	font-size: 15px;
	margin: 10px 0 0 0;
}

#helper {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
#helper a {
	display: block;
	width: 100%;
	padding: 10px;
	border-bottom: solid 1px #999;
	border-left: solid 1px #999;
	border-right: solid 1px #999;
	font-size: 12px;
	color: #000;
	text-decoration: none;
	background: #FFF;
}
#helper a:hover {
	background: #999;
	color: #FFF;
}

And Javascript File

var AutoCountry = {};
AutoCountry = function() {
	this.minChars = 1;
	this.field = null;
	this.countryLoopId = 0;
	this.helper = null;
	this.helperContent = "";
}
AutoCountry.prototype = {
	init:function(idOfTheField) {
		this.field = document.getElementById(idOfTheField);
		if(!this.field) {
			alert("Wrong input !");
		} else {
		
			this.createHelper();
			this.field.onkeyup = this.onFieldIn;
			this.field.onblur = this.onFieldOut;
		}
	},
	onFieldIn:function() {
	
		AC.loop();
	},
	onFieldOut:function() {
		clearTimeout(AC.countryLoopId);
		setTimeout("AC.hideHelper()", 600);
	},
	loop:function() {
		var list = "";
		var value = AC.field.value;
		if(value.length &gt;= this.minChars) {
			var numOfCountries = countries.length;
			for(var i=0; i&lt;numOfCountries; i++) {
				if(value.toLowerCase() == countries[i].substr(0, value.length).toLowerCase()) {
					list += '<a href="AC.setCountry(\'' + countries[i] + '\');">' + countries[i] + '</a>'
				}
			}
		}
		if(list != "") {
			if(this.helperContent != list) {
				this.helperContent = list;
				this.helper.innerHTML = this.helperContent;
			}
			this.showHelper();
		} else {
			this.hideHelper();
		}
		AC.countryLoopId = setTimeout("AC.loop()", 200);
	},
	setCountry:function(country) {
		this.field.value = country;
		this.hideHelper();
	},
	// helper
	createHelper:function() {
		this.helper = document.createElement("div");
		this.helper.style.width = (this.field.offsetWidth - 22) + "px";
		this.helper.setAttribute("id", "helper");
		this.helper.innerHTML = "";
		document.body.appendChild(this.helper);
		this.positionHelper();
		this.hideHelper();
	},
	positionHelper:function() {
		var position = {x:0, y:0};
		var e = this.field;
		while(e) {
			position.x += e.offsetLeft;
			position.y += e.offsetTop;
			e = e.offsetParent;
		}
		this.helper.style.left = position.x + "px";
		this.helper.style.top = (position.y + this.field.offsetHeight)+ "px";
	},
	showHelper:function() {
		this.helper.style.display = "block";
	},
	hideHelper:function() {
		this.helper.style.display = "none";
	}
}

var AC = new AutoCountry();

var countries = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusettes","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennesse","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] 
;
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s