<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>

<script type=text/javascript>
    // source: http://de.wikibooks.org/wiki/Websiteentwicklung:_AJAX:_Erstes_Programm
    var _ajax;
    
    function got_answer() {
	if (_ajax.readyState == 4 && _ajax.status == 200) {
	    document.getElementById('result').innerHTML = _ajax.responseText;
	}
    }

    function search_entries(value) {
	value = encodeURIComponent(value);
	request = "?action=search&format=table&max=3&pattern=" + value;
	_ajax = new XMLHttpRequest();
	_ajax.onreadystatechange = got_answer;
	_ajax.open("GET", request, true);
	_ajax.send();
    }
</script>

<style type="text/css">
	form label { display:block; float:left; width:10ex; }
</style>

</head><body>

[ <a href="?action=add">Add Entries</a> ]

<h1>Adressbuch</h1>

	<form autocomplete=off>
	<label for=pattern>Suche</label>
	<input  id=pattern type=text name=pattern 
	    onKeyUp="search_entries(this.value)" 
	    onChange="submit()") />
	<input type=hidden name=action value=search autocomplete=off />
	<noscript><input type=submit /></noscript>
	</form>

	<div id=result>
	    {% include "results.html" %}
	</div>

</body>
