<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="code.xsl" ?>
<dns4.nl>
<voorbeeld>
<title>javascript en css voor de autocomplete pagina.</title>
<verwijzende_link>http://www.dns4.nl/pagina/html_code/autocomplete_valid_xhtml.html</verwijzende_link>
<informatie>


</informatie>
<programma_code>
<![CDATA[
<!-- de code begint vanaf hier.

	<script type="text/javascript">
		<!--
		var suggestions = new Array("ballen", "balken", "branden","braden","broden", "balsem","bakker");
		var outp;
		var oudeins;
		var posi = -1;
		var words = new Array();
		var input;
		var key;
		function setVisible(zichtbaar)
			{
			var x = document.getElementById("opzijnplaats");
			var t = document.getElementsByName("text")[0];
			x.style.position = 'absolute';
			x.style.top = (findPosY(t)+3)+"px";
			x.style.left = (findPosX(t)+2)+"px";
			x.style.visibility = zichtbaar;
		}
		function init()
			{
			outp = document.getElementById("laathetzien");
			window.setInterval("lookAt()", 100);
			setVisible("hidden");
			document.onkeydown = keygetter; //needed for Opera...
			document.onkeyup = keyHandler;
			document.getElementById('text').focus();
		}
		function findPosX(obj)
			{
			var curleft = 0;
			if (obj.offsetParent)
			{
			while (obj.offsetParent)
			{
				curleft += obj.offsetLeft;
				obj = obj.offsetParent;
				}
			}
			else if (obj.x)
			curleft += obj.x;
			return curleft;
		}
		function findPosY(obj)
			{
			var curtop = 0;
			if (obj.offsetParent)
			{
				curtop += obj.offsetHeight;
				while (obj.offsetParent)
				{
					curtop += obj.offsetTop;
					obj = obj.offsetParent;
				}
			}
			else if (obj.y)
			{
				curtop += obj.y;
				curtop += obj.height;
			}
			return curtop;
		}
		function lookAt()
			{
			var ins = document.getElementsByName("text")[0].value;
			if (oudeins == ins)
				return;
			else if (posi > -1);
			else if (ins.length > 0)
			{
			words = getWord(ins);
			if (words.length > 0)
			{
				clearOutput();
				for (var i=0;i != words.length; ++i)
				addWord (words[i]);
				setVisible("visible");
				input = document.getElementsByName("text")[0].value;
			}
			else
			{
				setVisible("hidden");
				clearOutput();
				posi = -1;
			}
			}
			else
			{
				setVisible("hidden");
				clearOutput();
				posi = -1;
			}
			oudeins = ins;
		}
		function addWord(word)
			{
			var sp = document.createElement("div");
			sp.appendChild(document.createTextNode(word));
			sp.onmouseover = mouseHandler;
			sp.onmouseout = mouseHandlerOut;
			sp.onclick = mouseClick;
			outp.appendChild(sp);
		}
		function clearOutput()
			{
			while (outp.hasChildNodes())
			{
				noten=outp.firstChild;
				outp.removeChild(noten);
			}
			posi = -1;
		}
		function getWord(beginning)
			{
			var words = new Array();
			for (var i=0;i < suggestions.length; ++i)
			{
				var j = -1;
				var correct = 1;
				while (correct == 1 && ++j < beginning.length)
				{
					if (suggestions[i].charAt(j) != beginning.charAt(j))
					correct = 0;
				}
				if (correct == 1)
				words[words.length] = suggestions[i];
			}
			return words;
		}       
		function setColor (_posi, _color, _forg)
			{
			outp.childNodes[_posi].style.background = _color;
			outp.childNodes[_posi].style.color = _forg;
		}
		function keygetter(event)
			{
			if (!event && window.event) 
			event = window.event;
			if (event)
				key = event.keyCode;
			else
				key = event.which;
		}
		function keyHandler(event)
			{
			if (document.getElementById("opzijnplaats").style.visibility == "visible")
			{
				var textfield = document.getElementsByName("text")[0];
				if (key == 40)//key down
				{ 
					if (words.length > 0 && posi <= words.length-1)
					{
						if (posi >=0)
							setColor(posi, "#ccccdd", "#000002");
						else 
							input = textfield.value;
							setColor(++posi, "#002200", "#ccccdd");
							textfield.value = outp.childNodes[posi].firstChild.nodeValue;
						}
					}
					else if (key == 38)
						{ //Key up
						if (words.length > 0 && posi >= 0)
						{
							if (posi >=1)
						{
						setColor(posi, "#ccccdd", "#000002");
						setColor((posi=posi-1), "#002200", "#ccccdd");
						textfield.value = outp.childNodes[posi].firstChild.nodeValue;
					}
					else
					{
						setColor(posi, "#ccccdd", "#000002");
						textfield.value = input;
						textfield.focus();
						posi=posi-1;
					}
				}
			}
			else if (key == 27)
				{ // Esc
				textfield.value = input;
				setVisible("hidden");
				posi = -1;
				oudeins = input;
				}
			else if (key == 8) 
				{ // Backspace
				posi = -1;
				oudeins=-1;
				} 
				}
			}
			var mouseHandler=function()
			{
			for (var i=0; i != words.length; ++i)
				setColor (i, "#ccccdd", "#000002");
				this.style.background = "#002200";
				this.style.color= "#ccccdd";
			}
			var mouseHandlerOut=function()
			{
			this.style.background = "#ccccdd";
			this.style.color= "#000002";
			}
			var mouseClick=function()
			{
			document.getElementsByName("text")[0].value = this.firstChild.nodeValue;
			setVisible("hidden");
			posi = -1;
			oudeins = this.firstChild.nodeValue;
		}
		// -->
	</script>
	<style type="text/css">
		form{
			border:0px solid #002500;
			background:url("../css/png/glans.png");
			width:210px;
			margin-left:10%;
		}
		input{
			background:#ccccdd;
			color:#000000
		}
		.laathetzien{
			margin-left:11%;
			font-family:Arial,sans-serif;
			font-size: 10pt;
			color:#000002;
			padding-left: 0px;
			padding-top: 0px;
			border:1px solid #ccccdc;
			width:100px;
			background:#ccccdd;
		}
		.opzijnplaats{
			border:0px solid #002500;
			width:102px;
			position:relative;
		}
		.opzijnplaats div{
			border:0px solid #002500;
			position:relative;
			top:-2px;
			left:20px;
		}
		.pinnen{position:absolute;left:4em;margin-top:2em;z-index:1000;}
	</style>

de code is hier geeindigd.
// -->
]]>
</programma_code>
<code_link>http://www.dns4.nl/pagina/alle_tekst_files.html</code_link>
</voorbeeld>
</dns4.nl>
