// autocomplete and related changes <br>
// Copyright 2004 Leslie A. Hensley<br>
// hensleyl@papermountain.org<br>
// you have a license to do what ever you like with this code<br>
// orginally from Avi Bryant <br>
// http://www.cincomsmalltalk.com/userblogs/avi/blogView?entry=3268075684<br>
// modified for 'autocomplete for zip codes at unizo.be' by Johan Reynaert<br>
<br>
<br>//how to use? --> look at the HTML-source
<style>
.autocomplete {
	position: absolute;
	color: #333333;
	background-color: #ffffff;
	border: 1px solid #999999;
	visibility: hidden;
}

.autocomplete ul {
  padding: 0;
  margin: 0;
}
 
.autocomplete li {
	display: block;
	cursor: pointer;
	margin: 1px;
	padding-left: 5px;
	padding-right: 5px;
	list-style-type: none;
	white-space: nowrap;
}

.autocomplete li.selected {
 background-color: #B6C5F2;
}
</style>
<script language="javascript" type="text/javascript" src="/scripts/xmlhttprequest.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/classes/kmonet/regio/AutocompletePostcode.jsp"></script>
<script type="text/javascript">
	window.onload = function(){
		AutocompletePostcode('postcode');
	}
</script>
<div style="position: relative;width:300px;">
	<!--input type="Hidden" id="postcode_h" name="postcode_id" value=""/-->
       <input type="text" autocomplete="off" id="postcode" name="postcode" value=""/>
       <div id="postcode_popup" class="autocomplete"></div>
</div>
<br>
als id van input-field voor autocomplete == 'postcode'
dan moeten de andere als id hebben: postcode_h en postcode_popup 

<!-- Javascripting

if (navigator.userAgent.indexOf("Safari") > 0) {
	isSafari = true;
	isMoz = false;
	isIE = false;
} else if (navigator.product == "Gecko") {
	isSafari = false;
	isMoz = true;
	isIE = false;
} else {
	isSafari = false;
	isMoz = false;
	isIE = true;
}

function AutocompletePostcode(id) {

	function liveUpdater(uriFunc, postFunc, preFunc){
		if(!postFunc) postFunc = function () {};
		if(!preFunc) preFunc = function () {}; //actually not used
	
	
		var request = null;
	    function removeChildren(parentElement){
			for(var i = parentElement.childNodes.length-1; i>=0; i--)
				parentElement.removeChild(parentElement.childNodes[i]);
		}
	    function update() {
			request = new XMLHttpRequest(); //important to make a new request -> this needs XMLHttpRequest-script
	        preFunc();
	        request.onreadystatechange = processRequestChange;
	        request.open("GET", uriFunc());
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
	        request.send(null);
	        return true;
	    }
	
	    function processRequestChange(){
			if (request.readyState == 4 && (request.status == 200 || request.status == 304)){
				var xmlDoc = request.responseXML
				//via nodes naar li (met id attribute)
				var result = getNode(xmlDoc,'result');
				var popup = gEBI(getNodeValue(result,'id')+'_popup');
				var postcodes = getNode(result,"postcodes");
				if(postcodes.childNodes.length>0){
					removeChildren(popup); //remove all 'options' in popup
					var cell_ul = document.createElement("ul"); //just for styling and IE ;(
					popup.appendChild(cell_ul);
					for(var i=0;i<postcodes.childNodes.length;i++){
						var p = postcodes.childNodes[i];
						var cell = document.createElement("li");
						cell.innerHTML = getNodeValue(p,'gemeente')+' '+getNodeValue(p,'postcode');//aka option_text
						cell.id = getNodeValue(p,'id'); //aka option_value
						cell_ul.appendChild(cell);
					}
				}
				postFunc();
			}
		}
	    return update;
	} //end liveUpdater
	
	
	function constructUri(){
		var separator = "?";
		if(uri.indexOf("?") >= 0)
			separator = "&";
		return uri + separator + "s=" + escape(inputField.value)+'&id='+id+'&popupId='+popupId+'&noCache='+new Date().getTime();
	}
   
	function hidePopup(){
		popup.style.visibility = 'hidden';
	}
	
	function handlePopupOver(){
		removeListener(inputField, 'blur', hidePopup);
	}
    
	function handlePopupOut(){
		if(popup.style.visibility == 'visible')
			addListener(inputField, 'blur', hidePopup);
	}
    
	function handleClick(e){
		inputField.value = eventElement(e).innerHTML;
		if (inputFieldHidden) inputFieldHidden.value = eventElement(e).id; ////ja en welke optionvalue zit in attrib id
		popup.style.visibility = 'hidden';
		inputField.focus();
	}
	
	function handleOver(e){
		options[current].className = '';
		current = eventElement(e).index;
		options[current].className = 'selected';
	}
    
    function post(){
		current = 0;
		options = popup.getElementsByTagName("li");
		
		if((options.length > 1) || (options.length == 1 && options[0].innerHTML != inputField.value)){
			setPopupStyles();
			for(var i = 0; i < options.length; i++){
				options[i].index = i;
				addOptionHandlers(options[i]);
			}
			options[0].className = 'selected';
		} else {
			popup.style.visibility = 'hidden';
		}
    }
  
	function setPopupStyles(){
		var maxHeight
		if(isIE){
			maxHeight = 200;
			popup.style.left = '0px';
			popup.style.top = (originalPopupTop + inputField.offsetHeight) + 'px';
		} else {
			maxHeight = window.outerHeight/3;
		}
		if(popup.offsetHeight < maxHeight) {
			popup.style.overflow = 'hidden';
		} else if(isMoz) {
			popup.style.maxHeight = maxHeight + 'px';
			popup.style.overflow = '-moz-scrollbars-vertical';
		} else {
			popup.style.height = maxHeight + 'px';
			popup.style.overflowY = 'auto';
		}
		popup.scrollTop = 0;
		popup.style.visibility = 'visible';
	}
    
	function addOptionHandlers(option) {
		addListener(option, "click", handleClick);
		addListener(option, "mouseover", handleOver);
	}
   
	function start(e) {
		if (timeout)
			window.clearTimeout(timeout);

		if(e.keyCode == 38){ //up arrow
			if(current > 0){
				options[current].className = '';
				current--;
				options[current].className = 'selected';
				options[current].scrollIntoView(false);
			}
		} else if(e.keyCode == 40) { //down arrow
			if(current < options.length - 1){
				options[current].className = '';
				current++;
				options[current].className = 'selected';
				options[current].scrollIntoView(false);
			}
		} else if((e.keyCode == 13 || e.keyCode == 9) && popup.style.visibility == 'visible') { //enter or tab
			inputField.value = options[current].innerHTML;
			//en ook hidden veld voor submit
			if (inputFieldHidden) inputFieldHidden.value = options[current].id;
			popup.style.visibility = 'hidden';
			inputField.focus();
			if(isIE){
				event.returnValue = false;
			} else {
				e.preventDefault();
			}
		} else { //no keys
			timeout = window.setTimeout(updater, 300);
		}
	}
	/* Functions to handle browser incompatibilites */
	function eventElement(event){
		if(isMoz)
			return event.currentTarget;
		else
			return event.srcElement;
	}
	function addKeyListener(element, listener){
		if (isSafari)
			element.addEventListener("keydown",listener,false);
		else if (isMoz)
			element.addEventListener("keypress",listener,false);
		else
			element.attachEvent("onkeydown",listener);
	}
	function addListener(element, type, listener){
		if(element.addEventListener)
			element.addEventListener(type, listener, false);
		else
			element.attachEvent('on' + type, listener);
	}
	function removeListener(element, type, listener){
		if(element.removeEventListener)
			element.removeEventListener(type, listener, false);
		else
			element.detachEvent('on' + type, listener);
	}
	/* some shortcuts */
	this.getNodeValue = function (el,name){
		if (el.getElementsByTagName(name)[0].firstChild == null) return '';
		else return el.getElementsByTagName(name)[0].firstChild.nodeValue;
	}
	this.setInner = function(el,value){
		if (document.getElementById(el)) document.getElementById(el).innerHTML = value;
	}
	this.setValue = function (el,value){
		if (document.getElementById(el)) document.getElementById(el).value = value;
	}
	this.getNode = function(el,name){
		return el.getElementsByTagName(name)[0];
	}
	this.getNodes = function(el,name){
		return el.getElementsByTagName(name);
	}
	this.$ = function(el){
		return document.getElementById(el).value;
	}
	this.gEBI = function(el){
		return document.getElementById(el);
	}
	this.setInner = function(el,value){
		if (document.getElementById(el)) document.getElementById(el).innerHTML = value;
	}

	var inputField = gEBI(id);
	var popupId = id+'_popup';
    var popup = gEBI(popupId);
	var inputFieldHidden = gEBI(id+'_h');
    var options = new Array();
    var current = 0;
    var originalPopupTop = popup.offsetTop;
	//where is the xml to query
	var uri = '/scripts/classes/kmonet/xml/regio/Postcode.getGemeentes.jsp'; //look at this url for a example
	//start the show
	var updater = liveUpdater(constructUri, post); 
	var timeout = false;
	//listen to the client
	addKeyListener(inputField, start);
	addListener(popup, 'mouseover', handlePopupOver);
	addListener(popup, 'mouseout', handlePopupOut);
}

-->