Auto-ausfüllen mit Java-Script ??

R

Ralph

Erfahrenes Mitglied
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 ;)
 
Hallo,

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

PHP: 
<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>

Code: 
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
 
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 !
 
Zuletzt bearbeitet:
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
PHP: 
//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 ;)
 
Original geschrieben von Ralph
Hmm. Eins versteh ich noch nicht. Wie mach ich mehrere Felder?
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
Ich versuchs nochmal...

Musste nur "arr_text_set = 0;" Nochmal am Ende der Popup Funktion aufrufen. Da wird wohl der Array zurückgesetzt oder?
Zum Vergrößern anklicken....
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
 
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.
 
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:

PHP: 
<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
 
Ok, also mal die ausführliche Variante ;)

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

PHP: 
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:

PHP: 
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:
PHP: 
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

PHP: 
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? ;)
 
Zuletzt bearbeitet:
Hallo,

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

PHP: 
<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
PHP: 
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...
PHP: 
var arr_set = new Array('0','0')
der "neue" Aufruf sieht so aus:
PHP: 
<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
 
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
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück