# Auto-ausfüllen mit Java-Script ??



## Ralph (5. August 2003)

Hallo,

kann man folgendes mit JS realisieren?

Man nehme ein INPUT Feld und eine z.B. in einem Array abgelegte Liste von vorher definierten Werten.

Nun soll, wenn das Feld den Focus bekommt (optimalste Variante) diese Liste aufpoppen. Und zwar nicht in einem neuen Broswerfesnter o.ä., sondern einfach eine Füll-Liste, wie man sie aus Excel kennt oder aus dem IE.

Gibt es sowas??  Hat schon mal jemand damit Erfahrung gesammelt?

Wenn ja bitte alle Infos ran hier. Danke für eure Mühe schonmal


----------



## Andreas Gaisbauer (5. August 2003)

Hallo,

ich schnell was in der Art geschrieben, ich finds eigentlich nicht schlecht 


```
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--

//Vorgabe Array
var arr_text = 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'); 

var arr_text_set = 0;

function popup(from_id,parent_from_id){
    //Selectfield schreiben
    if(arr_text_set == 0){
        //Select formatieren
        tbl = arr_text.length;
        document.getElementById(from_id).size = tbl+1;

        //Select füllen
        for(var i=0; i<tbl; i++){
            new_entry = new Option(arr_text[i],arr_text[i],false,false);
            document.getElementById(from_id).options[document.getElementById(from_id).length] = new_entry;
        }

        //arr_text_set setzen
        arr_text_set = 1;
        show_hide('show',parent_from_id);
    }
    else{
        show_hide('show',parent_from_id);
    }
}



function transfer(si, id_to, id_from, parent_from_id){
    document.getElementById(id_to).value = document.getElementById(id_from).options[si].text;
    show_hide('hide',parent_from_id);
}


function show_hide(mode,from_id){
    if(mode=='show'){
        document.getElementById(from_id).style.display = 'block';
    }
    else if(mode=='hide'){
        document.getElementById(from_id).style.display = 'none';
    }
    else{
        alert('error');
    }
}
//-->
</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>

<form name="demo">
    <input type="text" name="textbox" id="textbox" onFocus="popup('canditate','suggestion')"> URL eingeben <br>
    <span id="suggestion" class="suggestion">
        <select id="canditate" onClick="transfer(this.selectedIndex,'textbox',this.id,'suggestion')"></select>
    </span>
    <input type="text" name="textbox2" id="textbox2"> XXX eingeben <br>
</form>
</body>
</html>
```


```
Das ganze besteht aus 3 Funktionen:
1) Popup: schreibt die Füllliste 
   Aufruf: popup(from_id,parent_from_id)
           from_id        = id des Selectfeldes
           parent_from_id = id des Layers, indem das Selectfeld liegt

2) Show_Hide: Switched die Liste on/off
   Aufruf: show_hide(mode,from_id)
           mode    = 'show' oder 'hide'
           from_id = id des Selectfeldes

3) Transfer: Schreibt aus der Liste ins Textfeld
   Aufruf: transfer(si, id_to, id_from, parent_from_id)
           si             = SelectedIndex
           id_to          = id des Zielfelds
           id_from        = id des Selectfeldes
           parent_from_id = id des Layers, indem das Selectfeld liegt

Schaus dir einfach mal an...

ciao
```


----------



## Ralph (6. August 2003)

Hui, hammer. Da kann wohl jmd. JS  Ich schaus mir mal an. Grossen Dank.


Hmm. Eins versteh ich noch nicht. Wie mach ich mehrere Felder? Also wenn ich der Transfer Funktion als Parameter für Ziel ID was übergebe interessiert das nicht. Irgendwie kann ich da auch "klaus" reinschreiben 

Könntest mir noch ein Beispiel für eine zweite Textbox schreiben? Wäre klasse.


Oh man  Manchmal bin ich gut ;D

Musste nur "arr_text_set = 0;" Nochmal am Ende der Popup Funktion aufrufen. Da wird wohl der Array zurückgesetzt oder? 

Also DICKES Dankeschön an Dich !


----------



## Ralph (6. August 2003)

Hmm und die Liste nochmal löschen musste ich. Okay das hab ich hinbekommen.


Nun fehlt mir noch die Variation von Arrays. Ich habe also in die Popup Funktion noch den Paramter Liste eingebaut. Dann übergebe ich beim Aufruf den Namen des Arrays, den ich zum SelectBox-Bau verwenden will. 

Funzt nicht :/ Die Übergabe klappt, hab ich mit nem "alert(liste)" getestet.

Aber in der Zeile

```
//Select füllen
        for(var i=0; i<tbl; i++){
            new_entry = new Option(arr_text[i],arr_text[i],false,false);
            document.getElementById(from_id).options[document.getElementById(from_id).length] = new_entry;
        }
```

kracht es wohl. Es werden keine einträge in die Box geschrieben. Ich hab "arr_text" durch "liste" ersetzt (der neue Parameter im Funktoinskopf), aber jetzt bin ich mit meinem JS-Latein am Ende


----------



## Andreas Gaisbauer (6. August 2003)

> _Original geschrieben von Ralph _
> Hmm. Eins versteh ich noch nicht. Wie mach ich mehrere Felder?


Ich habd befürchtet das du mich das fragen wirst...  Es sollte eigentlich nicht schwer sein, hat mir aber gester echt Kopfzerbrechen gemacht...



> Könntest mir noch ein Beispiel für eine zweite Textbox schreiben? Wäre klasse.


Ich versuchs nochmal...



> Musste nur "arr_text_set = 0;" Nochmal am Ende der Popup Funktion aufrufen. Da wird wohl der Array zurückgesetzt oder?


Jein, ich hatte es erst ganz ohne diese Abfrage, dann wird das ganze Array jedoch bei jedem "onFocus" in das Feld eingefügt - es summiert sich also 6-12-18... usw. Wenn set==1 dann überspring ich das ganze einfügen.

bye


----------



## Ralph (6. August 2003)

Kansnt die Fragen schon wieder vergessen  Ich hab das Script ein wenig abgeändert und auch in PHP eingebaut. 

Jetzt hab ich nur noch ein kleines Problem, dass ich über den Funktionsaufruf beim onFocus kein Array übergeben kann. Oder zumindestnicht weiss wie. Bzw ich übergebe einen String, der genauso heisst, wie ein Array, welches im JS Script steht, und dieser soll dann anstelle des Strings eingesetzt werden. 

Das macht mir also auch gerad kopfzerbrechen mit den mehrfach Listen.

Der Rest funzt jetzt so, wie ich es benötige.


----------



## Andreas Gaisbauer (6. August 2003)

Hallo,

Sorry, kanns mir grad nicht vorstellen, gib mir mal den Konreten aufruf... Wenn du einen Sting mit trennzeichen übergibst, können wir daraus ein Array bauen . Das Array an und für sich macht die Hauptarbeit im Script, von daher wäre es nötig. Allerdings gibts dazu mehrere Lösungen, die mir grad durch den Kopf gehen. 

Wenn du Beispielsweise, follgendes machen kannst, dann wäre das alles kein Problem:


```
<select id="canditate" onClick="transfer(this.selectedIndex,'textbox',this.id,'suggestion')">
  <option>/*php echo mit text 1*/</option>
  <option>/*php echo mit text 2*/</option>
  <option>/*php echo mit text 3*/</option>
...
</select>
```

oder reden wir aneinander vorbei?


bye


----------



## Ralph (6. August 2003)

Ok, also mal die ausführliche Variante 

Ich baue mir mit PHP das Array, welches zum Füllen der Box benötigt wird.


```
echo "var raumtyp = new Array(";
for ($i = 1; $i < 19; $i++)
{
	echo "'".raumtyp($i)."'";
	if ($i != 18)
		echo ",";
}
echo");";
```

Das klappt auch. Raumtyp ist hier eine Funktion, die die Vorgaben enthält, später kommt das aus einer DB.

Meine Funktion, bzw Deine  sieht nun so aus bei mir:


```
function box_malen($liste, $name)
{
	/*
		Hier noch rein, autmoatsich das Array anlegen aus DB dann
	*/

	return '
	<!-- Box '.$name.' -->
	function '.$name.'(from_id,parent_from_id){	
	//Selextbox leeren
	document.getElementById(from_id).length=0;

    //Select formatieren
    tbl = '.$liste.'.length;
    document.getElementById(from_id).size = tbl+1;

    //Select füllen
    for(var i=0; i<tbl; i++){
    	new_entry = new Option('.$liste.'[i]);
        document.getElementById(from_id).options[document.getElementById(from_id).length] = new_entry;
    }
	//Box zeigen
    show_hide(\'show\',parent_from_id);
	}
	';
}
```

Alles in PHP, weil ich das mit den versch. Arrays bis jetzt nicht hinbekommen habe. Deshalb male ich mir einfach die nätige Anzahl von POP-Up Funktionen und rufe die dann auf. Aber das is ja nich Sinn und Zweck, eigentlich.

Meine alte Variante, mit dem neuen Paramter sah so aus:

```
function popup(from_id,parent_from_id, liste){

[...]

   tbl = liste.length;

[...]

   new_entry = new Option(liste[i]);

[...]
}
```

Und der Rest wie oben. Also. Nun habe ich beim onFocus von dem Inputfeld einfach 


```
onfocus="popup('canditate','suggestion', 'raumtyp')"
```

geschrieben.Meine Hoffnung war, dass nun weiter oben im JS Bereich, dieser String Raumtyp augegriffen wird, an die Stelle von "liste" gepackt wird und so quasi das Array ausgelesen wird. 
Aber das passiert natürlich nicht, sondern es steht einfach an Stelle von "liste" die Zeichenkette "raumtyp".


Ich möchte aber halt, am besten über die Paramter der Funktion das gewünschte Array ansprechen können.

Damit wäre ich total frei in der Gestaltung. Das ist das, was ich brauche 

Nun einigermaßen verstanden? Oder brauchst noch Code? Oder nen Kaffee?


----------



## Andreas Gaisbauer (6. August 2003)

Hallo,

habs jetzt nochmal umgeschrieben - jetzt kannst so viele Felder verwenden wie du willst. 


```
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// Version 2
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');

var arr_set = new Array('0','0')

// popup('0','canditate',suggestion)
function popup(arr_id,from_id,container) //popup(0,0)
{
    //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);
    }else{
        show_hide('show',container);
    }
}


function show_hide(mode,container){
    if(mode=='show'){
        document.getElementById(container).style.display = 'block';
    }else if(mode=='hide'){
        document.getElementById(container).style.display = 'none';
    }else{
        alert('error');
    }
}


function transfer(si, id_to, id_from, parent_from_id){
    document.getElementById(id_to).value = document.getElementById(id_from).options[si].text;
    show_hide('hide',parent_from_id);
}




</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>

<form name="demo">

    <input type="text" name="textbox" id="textbox" onFocus="popup('0','canditate','suggestion')"> URL eingeben <br>
    <span id="suggestion" class="suggestion">
        <select id="canditate" onClick="transfer(this.selectedIndex,'textbox',this.id,'suggestion')"></select>
    </span>

    <input type="text" name="textbox2" id="textbox2" onFocus="popup('1','canditate2','suggestion2')"> XXX eingeben <br>
    <span id="suggestion2" class="suggestion">
        <select id="canditate2" onClick="transfer(this.selectedIndex,'textbox2',this.id,'suggestion2')"></select>
    </span>
</form>
</body>
</html>
```

Was muss beachtet werden? Wir haben jetzt nicht mehrer Arrays sondern ein Mehrdimensionales. Die einzelnen "Listen" kommen also in das Array "arr" nach dem Schema

```
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');
```
desweiteren brauchen wir ein Array mir den "Set" Variablen - jedes Unterarray bekommt eine Stelle...

```
var arr_set = new Array('0','0')
```
der "neue" Aufruf sieht so aus:

```
<input type="text" name="textbox" id="textbox" onFocus="popup('0','canditate','suggestion')"> URL eingeben <br>
    <span id="suggestion" class="suggestion">
        <select id="canditate" onClick="transfer(this.selectedIndex,'textbox',this.id,'suggestion')"></select>
    </span>
   <input type="text" name="textbox2" id="textbox2" onFocus="popup('1','canditate2','suggestion2')"> XXX eingeben <br>
    <span id="suggestion2" class="suggestion">
        <select id="canditate2" onClick="transfer(this.selectedIndex,'textbox2',this.id,'suggestion2')"></select>
    </span>
```
der erste Parameter ist die Stelle im Array, also 0-x, der Rest ist selbsterklärend...

ciao


----------



## Ralph (7. August 2003)

Danke !

Sehr gut. Funktioniert hervorragend.

Noch eine kleine Frage. Ich hab Arrays, die bis zu 100 Inhalte haben. 
Nun wird die Selexctbox ohne Scrollbalken gebaut. Geht das auch mit? Ich hab im HTML Code mit size="10" einen Versuch gestaret aber das funktioniert nicht. Kann ich über die StyleSheet KLasse was nachhelfen oder gehts gar nicht? Oder muss das im JS Script passieren?

Du weisst das bestimmt ;D


----------



## Andreas Gaisbauer (7. August 2003)

Hallo,

das musst du im Javascript ändern 


```
//Selectfield schreiben
        tbl = arr[arr_id].length
        document.getElementById(from_id).size = '10';
```

sollte das Problem lösen...


bye


----------



## Ralph (7. August 2003)

danke  optimal.


----------



## Ralph (8. August 2003)

Hallo crono,

ich habe noch eine sehr wichtige Frage. Wenn so eine Listbox jetzt aufpoppt...

wie kann ich da nen Dreh reinbekommen, das ich mit den Cusor-Tasten rauf- und runterscrollen kann ? ;(


----------



## Andreas Gaisbauer (8. August 2003)

Hallo,

ergänze die beiden roten Zeilen in der Funktion "popup".


```
//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();
    }
}
```
Das übertragen funktioniert leider NOCH nicht mit Return, sondern nur via "Click".

bye


----------



## Andreas Gaisbauer (8. August 2003)

Jetzt ist es perfekt - in meinen Augen zuminderst  File liegt im Anhang, wer fragen dazu hat, oder Fehler findet gibt mir bitte Feedback.

ciao


----------



## Ralph (11. August 2003)

Hmmm 

Also es ist sehr schick. Nur leider kann ich jetzt, wenn ich es in der Form verwenden würde, keine Eingaben mehr ins Formular machen. Dann kann ich auch ne Selectbox nehmen 

wichtig wäre es, dass der Focus erst wechselt, wenn man den Pfeil nach unten oder oben betätigt. 

Ich versuch das hier gerad mal hinzubekommen... aber naja, bin halt kein JS Profi 

Aber wenn du keine Zeit mehr hast, kein Problem, hast mir schon sehr geholfen und ich bekomm langsam ein schlechtes Gewissen


----------



## Andreas Gaisbauer (12. August 2003)

Woah, schön langsam wird das Script richtig erwachsen . Also habs jetzt so abgeändert, dass der Vorschlag erst (und nur dann) bei einem Druck auf "Cursor unten" aufpoppt. Hier für die Suchmaschine mal das ganze Skript:


```
<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>
```

Ok, was hat sich (für dich) geändert:
1) onFocus="popup('1','canditate2','suggestion2') gibt es nicht mehr. Hier muss jetzt onFocus="set_aF('0','canditate','suggestion') rein.
Wichtig: Am sonstigen Aufruf ändert sich nix (das war beabsichtigt)

2) Die Funktion set_aF muss ergänzt werden (incl. dazugehöriger Globaler Variablen):

```
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;
}
```

3) die beiden "lausch" Funktionen müssen geändert werden:

```
<script for="document" event="onkeydown()" language="JScript" type="text/jscript">
<!--

// und 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>
```
und

```
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;
```

So, denke das sollten alle Änderungen gewesen sein. Das Komplette Skript zum Testen findest du wie immer im Anhang...

bye


----------



## Ralph (12. August 2003)

Klasse !

Werd ich morgen früh mal einbauen. Besten Dank. Ich hoffe, es ***** 
(<== ????? Naugt  weiß heute morgen nicht mehr, as ich gestner geschrieben hab aber. Auf jede Fall nix schlimmes )
jetzt so, wie ich es mir vorstelle und benötige und ich Dich nicht mehr nerven muss )

**** Update

Crono ! Du bist gut ! Aber ;( Ich kann das leider nicht so verwenden *schnief*.

Also, falls du noch Nerven und Zeit hast, aber auch nur dann  

Diese Listboxen müssten, damit ich sie gebrauchen kann:

- beim onFocus() vom Inputfeld die Box aufklappen
- Cursour steht weiterhin im Inputfeld
- bei Cursour-Down springt der Focus in die Box und man kann scrollen und mit Enter bestätigen.
- Nach auswahl eines Elements springt das Feld in das nächste Formularfeld (das bekomm ich alleine hin )

Die Boxen dürfen nicht:

- erst aufklappen, wenn man Arrow-Down drückt ;(
- dürfen nicht den Focus sperren (wie in der Version davor)


Also freie Eingabe, Listbox zu sehen, bei Pfeil nach unten Focus Wechsel, Auswahl mit Enter, Box schliessen, fertig.

Vielleicht fehlt ja nur eine Kleinigkeit bei dem jetzigen Script, das sich das Ding schon beim Klick aufbaut, aber erst beim Pfeil-unten auswählen lässt.

Gruss
Ralph


----------

