<html>
<head>
<script for="document" event="onkeydown()" language="JScript" type="text/jscript">
<!--
// speichert den zugehörigen KeyCode in der Globalen Varibale "key_code"
{ k_c = window.event.keyCode;
key_code = k_c;
if(key_code == 40){
popup(aF_ArrID,aF_FromID,aF_Container);
}
return true;
}
//-->
</script>
<script language="JavaScript1.2" type="text/javascript">
// GLOBALS
// "arr" = ein Array, welches die "Vorgabe"-Arrays aufnimmt -> daher Mehrdimensional
var arr = new Array();
arr[0] = new Array('http://www.tutorias.de','http://www.google.de','http://www.drweb.de','http://devedge.netscape.com','http://msdn.microsoft.com','http://www.mozilla.org');
arr[1] = new Array('10000000','20000000','30000000','40000000','50000000','60000000');
// "arr_set" = Array, das jedem Array in "arr" ein Statusflag zuordnet
var arr_set = new Array('0','0')
// "containers" = Array mit den id´s der "Layout"Container, in welchen die Dropdowns liegen
var containers = new Array('suggestion','suggestion2');
// "key_code" speichert die zurückgegebenen KeyCodes (13 = [Return])
var key_code;
var aF_ArrID;
var aF_FromID;
var aF_Container;
// Übergabefunktion
function set_aF(arr_id,from_id,container){
aF_ArrID = arr_id;
aF_FromID = from_id;
aF_Container = container;
}
//Browserweiche
var Netscape = new Boolean();
if(navigator.appName == "Netscape"){
Netscape = true;
}
function key_pressed(ev)
{
if(Netscape){
key_code = ev.which;
if(key_code == 40){
popup(aF_ArrID,aF_FromID,aF_Container);
}
return true;
}
}
document.onkeydown = key_pressed;
// popup('0','canditate',suggestion)
function popup(arr_id,from_id,container)
{
//Selectfeld schreiben
if(arr_set[arr_id] == '0'){
//Selectfield schreiben
tbl = arr[arr_id].length
document.getElementById(from_id).size = tbl+1;
//Select füllen
for(var i=0; i<tbl; i++){
new_entry = new Option(arr[arr_id][i],arr[arr_id][i],false,false);
document.getElementById(from_id).options[document.getElementById(from_id).length] = new_entry;
}
//arr_text_set setzen
arr_set[arr_id] = 1;
show_hide('show',container,from_id);
document.getElementById(from_id).focus();
}else{
show_hide('show',container,from_id);
document.getElementById(from_id).focus();
}
}
function show_hide(mode,container){
hide_all();
if(mode=='show'){
document.getElementById(container).style.display = 'block';
}else if(mode=='hide'){
document.getElementById(container).style.display = 'none';
}else{
alert('error');
}
}
function transfer(mode,si, id_to, id_from, parent_from_id){
if(mode==1){
if(key_code == 13){
document.getElementById(id_to).value = document.getElementById(id_from).options[si].text;
show_hide('hide',parent_from_id);
key_code = 0;
}else{}
}else if(mode==0){
document.getElementById(id_to).value = document.getElementById(id_from).options[si].text;
show_hide('hide',parent_from_id);
}
}
function hide_all(){
var len = containers.length;
for(var x=0; x<len; x++){
document.getElementById(containers[x]).style.display = "none";
}
}
</script>
<style type="text/css">
.suggestion{
display:none;
position:absolute;
width:200px;
height:0px;
z-index:1;
border:1px solid black;
}
input, select{
width:200px;
}
</style>
</head>
<body onClick="hide_all()">
<form name="demo">
<input type="text" name="textbox" id="textbox" onFocus="set_aF('0','canditate','suggestion')"> URL eingeben <br>
<!--<input type="text" name="textbox" id="textbox"> URL eingeben <br>-->
<span id="suggestion" class="suggestion">
<select id="canditate" onClick="transfer(0,this.selectedIndex,'textbox',this.id,'suggestion')" onKeyDown="transfer(1,this.selectedIndex,'textbox',this.id,'suggestion')"></select>
</span>
<input type="text" name="textbox2" id="textbox2" onFocus="set_aF('1','canditate2','suggestion2')"> XXX eingeben <br>
<!--<input type="text" name="textbox2" id="textbox2"> XXX eingeben <br>-->
<span id="suggestion2" class="suggestion">
<select id="canditate2" onClick="transfer(0,this.selectedIndex,'textbox2',this.id,'suggestion2')" onKeyDown="transfer(1,this.selectedIndex,'textbox2',this.id,'suggestion2')"></select>
</span>
</form>
</body>
</html>
)
