Auswahl - Javascript

JackApple · 27 September 2010

Habe eine kleine Frage, ich bin derzeit als Ferialpraktikant bei einer Firma unter anderem für die Erneuerung der Homepage zuständig und habe eine kleines Problem.

Ich muss ein Telefonbuch erstellen inwelchem man einen Nachnamen eingibt und dann dessen Telefonnummern erscheinen.
Das ganze habe ich schlicht und einfach mit ein paar Textfeldern einem Button und einer Javascript Switch Funktion gelöst. Wenn jetzt aber zwei Leute im Betrieb den selben Nachnamen haben soll eine Auswahl zwischen den beiden auftauchen. Ich könnte jetzt mit window.open einfach eine neue Seite anzeigen lassen auf welcher man zwischen den Personen auswählen kann, nun wollte ich euch fragen ob ihr eine Idee hättet, wie man dies machen könnte OHNE eine neue Seite erstellen zu müssen?

mfg Jakob

Edit: So ungefähr sieht meine Funktion aus, falls dies jmd hilft: (Also bei Personen dessen Nachnamen es nur 1mal gibt)

HTML:

<script language="JavaScript" type="text/JavaScript">
function auswahl() {
var anz;
anz = document.formular.textfeld.value;
switch(anz) {
case "Mustermann":
document.formular.name.value = "Max Mustermann";
document.formular.durch.value = "929249429";
break;
case "Musterfrau":
document.formular.name.value = "Melanie Musterfrau";
document.formular.durch.value = "123123131";
break;
}
}
</script>

Gilles · 28 September 2010

Fände es schonmal besser die Daten in einer Datenbank abzuspeichern. Dann Besteht nun die Frage, ob ihr nen webserver mit Datenbank habt, oder ob das ganze Lokal laufen soll. Denn die Variante mit Case Switch ist ja leicht, aber sehr schwer zu warten. Sollte mal jemand aus der Liste fliegen, oder Leute würden hinzukommen wäre das für mich ein Mehraufwand. Besser wäre da ein Webserver mt Apache und Datenbank. Und dann kann man Ajax benutzen um die Daten auszulesen.
Falls ich dich da jetzt komlett mit überfordere wäre es halt wichtig zu wissen:
- hast du einen webserver mit datenbank zur verfügung?
- kannst du PHP?
- soll das ganze auch offline laufen? (Sprich nur mit JS)

Und bitte benutze doch für deinen code die Code tags :) (In meiner Signatur ist ein link zu einem thema wo steht, wie man die benutzt)

JackApple · 28 September 2010

ok hab ich gemacht, danke für den Hinweis :)

Ich kann zwar PHP nur leider hab ich keine Datenbank zur Verfügung, ich muss dass ganze mit dem Schrottprogramm RedDot CMS bearbeiten, ist ja schon fast ein Wunder das mit dem überhaupt JS funktioniert.

Nun aber das ist ja alles nicht das Problem. Ich möchte das bei bestimmten Einträgen eben ein Fenster aufgeht in welchem man dann zwischen zwei oda drei Einträgen auswählen kann, eben wenn es einen Nachnamen öfter gibt. Extra neue Seiten dafür zu erstellen wäre aufwendig und würde die Wartung noch komplizierter machen. Es gibt doch so Fenster wie window.promt alert oda window.confirm gibts nicht auch eine Art window.choose?? ^^

JackApple · 29 September 2010

Keiner eine Idee?
Würde mich sehr freuen falls jmd einen Lösungvorschlag hätte.

Gilles · 30 September 2010

JackApple schrieb:
Ich kann zwar PHP nur leider hab ich keine Datenbank zur Verfügung, ich muss dass ganze mit dem Schrottprogramm RedDot CMS bearbeiten, ist ja schon fast ein Wunder das mit dem überhaupt JS funktioniert.

Es gibt doch so Fenster wie window.promt alert oda window.confirm gibts nicht auch eine Art window.choose?? ^^

RedDot basiert doch auf ASP. Und da gibt es keine Möglichkeit eine Datenbank auszulesen?

Das ganze in JS zu machen ist etwas komisch zu warten aber müsste machbar sein. Sowas wie window.choose gibt es leider nicht ;)
Da musst du dir schon was einfallen wie du Suchelemente live einbaust. Du kannst mit JS nämlich Elemente erstellen und diese ins Dokument einhängen und auch später wieder entfernen.
Aber vorerst mal die Idee.
Man nimmt ein zweidimensionales Array. Und nun nehmen wir mal an wir haben 2 mal Mustermann.
Dann würde ich so an den Vornamen von Mustermann1 kommen.

Code:

 personenArray['Mustermann'][0]['vorname']

In Json Form geschrieben könnte dein Array also so aussehen.

Code:

var personen = {
  "Mustermann" : [
    {
       "vorname" : "Max",
       "alter" : 37,
       "abteilung" : "IT"
    },
    {
       "vorname" : "Erika",
       "alter" : 33,
       "abteilung" : "Rechnungswesen"
    } 
  ],
  "Müller" : [
    {
       "vorname" : "Bernd",
       "alter" : 46,
       "abteilung" : "IT"
    }
  ]

};

Ich hoffe es ist verständlich wie die variable aufubauen ist. Wenn du willst kannst du ja noch Nachname einbauen. Was du dich jetzt bestimmt fragst. Wie krieg ich jetzt die Unterauswahl hin? Eventuell nimmst du dafür Combo boxen.
Wie man das macht kann eventuell mal jemand anders zeigen, oder ich mach es heute nachmittag, wenn ich etwas mehr zeit habe :)

Loon3y · 30 September 2010

Alternativ könnte man das ganze auch objektorientiert umsetzen.

HTML:

<!Doctype html>
<html>
<head>
	<title>test</title>
<script type="text/javascript">
function Person(){

 var id;
 var vorname;
 var nachname;
 var telefon;
 var abteilung;

 this.setID = function(arg){
    id = arg;
 };

 this.getID = function(){
   return id;
 };


 this.setVorname = function(arg){
    vorname = arg;
 };

 this.getVorname = function(){
   return vorname;
 };


 this.setNachname = function(arg){
    nachname = arg;
 };

 this.getNachname = function(){
   return nachname;
 };


 this.setTelefon = function(arg){
    telefon = arg;
 };

 this.getTelefon = function(){
   return telefon;
 };


 this.setAbteilung = function(arg){
    abteilung = arg;
 };

 this.getAbteilung = function(){
   return abteilung;
 };

}

var aPersons = new Array();

var oP = new Person();

oP.setID(0);
oP.setVorname("Max");
oP.setNachname("Mustermann");
oP.setTelefon("012343");
oP.setAbteilung("Rechnungswesen");
aPersons[oP.getID()] = oP;

oP.setID(1);
oP.setVorname("Max2");
oP.setNachname("Mustermann2");
oP.setTelefon("0123432");
oP.setAbteilung("Einkauf");
aPersons[oP.getID()] = oP;

</script>
</head><body>

</body></html>

Über die ID kannst du dir dann das Objekt holen und daraus auch Vorname, Nachname, Telefonnummer, Abteilung.:

Gruß
Loon3y

JackApple · 30 September 2010

Danke für eure Mühe :)

@Gilles soweit alles verständlich, die Frage is jetzt nur noch wie ich das schön ausgebe? Was genau sind Combo Boxen??

@Looney Dein Code is mir etwas zu kompliziert ^^
Teile davon versteh ich nicht so recht. (Bin noch Anfänger in diesem Gebiet^^) Aber grundsätzlich verstehe ich was du gemacht hast, die Frage ist mir jetzt nur wieder wie ich die Objekte dann ausgebe.

Momentan hab ich es schlicht und einfach so gelöst, dass ich 6 statt 3 Textfelder habe. Also das beide Personen ausgegeben werden wenn sie den selben Nachnamen haben, aber gerade dass hat meinem Chef net so gefallen, er meinte es wäre schöner wenn dann zwischen den beiden auswählen könnte oder so.

PS: Nieder mit RedDot CMS

mfg Jakob

Loon3y · 1 Oktober 2010

Da du ja:

aPersons[oP.getID()] = oP;

anhand der ID das Objekt in das Array legst, kannst du andersrum auch wieder so darauf zugreifen:

Code:

var oP = aPersons[0]

// vorname
alert( oP.getVorname() );

// nachname
alert( oP.getNachname() );

// usw..

JackApple · 1 Oktober 2010

Das heißt die Daten werden alle mit einer alert Meldung ausgegeben? Gefällt mir jz eigentlich nicht so recht. Ich hätte sie in ein oder mehrere Textfelder gelegt, die Frage ist halt was bei Personen mit selben Nachnamen passiert, denke aber ich werds jetzt wohl oder übel einfach so lösen dass für alle Personen mit gleichem Nachnamen eine neue Seite geöffnet wird.

Loon3y · 1 Oktober 2010

Das heißt die Daten werden alle mit einer alert Meldung ausgegeben? Gefällt mir jz eigentlich nicht so recht. Ich hätte sie in ein oder mehrere Textfelder gelegt, die Frage ist halt was bei Personen mit selben Nachnamen passiert, denke aber ich werds jetzt wohl oder übel einfach so lösen dass für alle Personen mit gleichem Nachnamen eine neue Seite geöffnet wird.

huch? Ich glaube du hast wirklich noch wenig Grundkentnis in JS.. ^^ das alert war nur ein Beispiel, genauso hätte ich document.write oder .innerHTML, oder oder oder nehmen können.

mal "schnell" als Beispiel gebaut:

HTML:

<!Doctype html>
<html>
<head>
	<title>test</title>
<script type="text/javascript">

/**
 * cPerson
 * @param int id
 * @param string vorname
 * @param string nachname
 * @param string telefon
 * @param string abteilung
*/
function cPerson(){

 var id;
 var vorname;
 var nachname;
 var telefon;
 var abteilung;

 this.setID = function(arg){
    id = arg;
 };

 this.getID = function(){
   return id;
 };


 this.setVorname = function(arg){
    vorname = arg;
 };

 this.getVorname = function(){
   return vorname;
 };


 this.setNachname = function(arg){
    nachname = arg;
 };

 this.getNachname = function(){
   return nachname;
 };


 this.setTelefon = function(arg){
    telefon = arg;
 };

 this.getTelefon = function(){
   return telefon;
 };


 this.setAbteilung = function(arg){
    abteilung = arg;
 };

 this.getAbteilung = function(){
   return abteilung;
 };

}

/**
 * aPersons
 * @param array aPersons
*/
var aPersons = new Array();

/**
 * Objekte befüllen
 */
var oP = new cPerson();
oP.setID(0);
oP.setVorname("Max");
oP.setNachname("Mustermann");
oP.setTelefon("012343");
oP.setAbteilung("Rechnungswesen");
aPersons[oP.getID()] = oP;

var oP = new cPerson();
oP.setID(1);
oP.setVorname("Max2");
oP.setNachname("Mustermann2");
oP.setTelefon("0123432");
oP.setAbteilung("Einkauf");
aPersons[oP.getID()] = oP;

</script>
</head><body>

<form action="" method="post">
	<fieldset>
		<legend>Telefonbuch</legend>
		<label for="name">Nachname:</label>
		<input type="text" id="name" value=""onKeyup="search()" />
	</fieldset>
</form>

<div id="output"></div>

<script type="text/JavaScript">
/**
 * search()
*/
function search(){

	var output;
	var query;
        var nachname;
	var oP;
	var search;
	var p;

	clearSearch();

        output = document.getElementById("output");
	query = document.getElementById('name').value;
	search = new RegExp(query.toLowerCase());
	
	for(var i = 0; i < aPersons.length; i++){
		oP = aPersons[i];
		nachname = oP.getNachname();
		nachname = nachname.toLowerCase();

		if(nachname.match(search) == null)
			continue;

		p = document.createElement("p");
		p.innerHTML = oP.getVorname() + " " + oP.getNachname() + ", " + oP.getTelefon() + ", " + oP.getAbteilung();
		if(output != null)
                        output.appendChild(p);
	}
}

/**
 * clearSearch()
*/
function clearSearch(){
	var output = document.getElementById("output");
	if(output != null)
		output.innerHTML = "";
}

</script>
</body></html>

Gruß
Loon3y

JackApple · 1 Oktober 2010

Loon3y schrieb:
huch? Ich glaube du hast wirklich noch wenig Grundkentnis in JS.. ^^ das alert war nur ein Beispiel, genauso hätte ich document.write oder .innerHTML, oder oder oder nehmen können.

Gruß
Loon3y

Ja im Prinzip schon :)

Danke für deine Hilfe, kann geclosed werden

Loon3y · 1 Oktober 2010

JackApple schrieb:
Ja im Prinzip schon :)

Danke für deine Hilfe, kann geclosed werden

hatte in meinen posting vorher noch etwas reineditiert. schaus dir mal an.

JackApple · 4 Oktober 2010

Danke für den Code, hat mir echt geholfen

JackApple · 5 Oktober 2010

Wenn ich eine Frage zu RedDot CMS habe, kann ich sie hier stellen? Und wenn ja, in welchem Unterforum??
Hab zu RedDot nur 1 Usergroup Forum gefunden und in dem bekomme ich keine Antwort.

Loon3y · 6 Oktober 2010

Hallo.

Je nachdem auf was sich deine Frage bezieht. Wenn Sie mit HTML zu tun hat, ins HTML-Unterforum, CSS ins CSS-Unterforum usw :)

Gruß
Loon3y

JackApple · 6 Oktober 2010

Loon3y schrieb:
Hallo.

Je nachdem auf was sich deine Frage bezieht. Wenn Sie mit HTML zu tun hat, ins HTML-Unterforum, CSS ins CSS-Unterforum usw :)

Gruß
Loon3y

Naja mein Problem bezieht sich eigentlich nur auf das Programm RedDot CMS. Hab dort bei einer Seite das Template geändert, dannach kommt beim Aufrufen dieser Seite nur noch die Fehlermeldung "Page is not available". Komischerweise ist der Punkt im Navigations Manager weg, in der Navigation der HP aber noch drinnen. Jetzt bring ich des einfach nicht mehr raus.
Denke aber da werden mir die wenigsten hier weiterhelfen können ^^

JackApple · 8 Oktober 2010

So Loo3y dein Code, oder zumindest ein Großteil davon ist jetzt auf der HP :)
Eine klitzekleine Frage hätt ich noch.
Wenn man einen Namen eingibt und dann return dürckt, eben bis kein Buchstabe mehr im Textfeld steht sieht man alle Einträge. Könnte man das vlt noch iwi verändern dass man da keine Einträge sieht? Ist jetzt nicht soo wichtig, aber gut wärs schon :)

PS: Sry für Doppelpost

Loon3y · 8 Oktober 2010

Hallo.

Mein Script war ja auch nur ein unfertiges Beispiel. Im Prinzip müstest du überprüfen wie lange die eingegebenen value ist.

Code:

<!Doctype html>
<html>
<head>
	<title>test</title>
<script type="text/javascript">

/**
 * cPerson
 * @param int id
 * @param string vorname
 * @param string nachname
 * @param string telefon
 * @param string abteilung
*/
function cPerson(){

	var id;
	var vorname;
	var nachname;
	var telefon;
	var abteilung;

	this.setID = function(arg){
		id = arg;
	};

	this.getID = function(){
		return id;
	};

	this.setVorname = function(arg){
		vorname = arg;
	};

	this.getVorname = function(){
		return vorname;
	};

	this.setNachname = function(arg){
		nachname = arg;
	};

	this.getNachname = function(){
		return nachname;
	};

	this.setTelefon = function(arg){
		telefon = arg;
	};

	this.getTelefon = function(){
		return telefon;
	};

	this.setAbteilung = function(arg){
		abteilung = arg;
	};

	this.getAbteilung = function(){
		return abteilung;
	};

}

/**
 * aPersons
 * @param array aPersons
*/
var aPersons = new Array();

/**
 * Objekte befüllen
 *
 */
var oP = new cPerson();
oP.setID(0);
oP.setVorname("Max");
oP.setNachname("Mustermann");
oP.setTelefon("012343");
oP.setAbteilung("Rechnungswesen");
aPersons[oP.getID()] = oP;

var oP = new cPerson();
oP.setID(1);
oP.setVorname("Max2");
oP.setNachname("Mustermann2");
oP.setTelefon("0123432");
oP.setAbteilung("Einkauf");
aPersons[oP.getID()] = oP;

</script>
</head><body>

<form onsubmit="reset()">
	<fieldset>
		<legend>Telefonbuch</legend>
		<label for="name">Nachname:</label>
		<input type="text" id="name" value=""onKeyup="search()" />
		<input type="submit" value="reset" name="reset" id="reset" />
	</fieldset>
</form>

<div id="output"></div>

<script type="text/JavaScript">
/**
 * search()
 * @return true
*/
function search(){
	var query = document.getElementById('name').value;
	clearSearch();
	if(query.length > 0)
		loadPersons(query);
	return true;
}

/**
* loadPersons
* @param object query
*/
function loadPersons(query){

	var output = document.getElementById("output");
	
	var search = new RegExp(query.toLowerCase());
	var nachname;
	var oP;
	
	for(var i = 0; i < aPersons.length; i++){
		oP = aPersons[i];
		nachname = oP.getNachname();
		nachname = nachname.toLowerCase();

		if(nachname.match(search) == null)
			continue;

		var p = document.createElement("p");
		p.innerHTML = oP.getVorname() + " " + oP.getNachname() + ", " + oP.getTelefon() + ", " + oP.getAbteilung();
		output.appendChild(p);
	}
}

/**
 * clearSearch()
*/
function clearSearch(){
	var output = document.getElementById("output");
	if(output != null)
		output.innerHTML = "";
}

/**
 * reset()
*/
function reset(){
	clearSearch();
	var input = document.getElementById("name");
	if(input != null)
		input.value = "";
}
</script>
</body></html>

Gruß
Loon3y

JackApple · 11 Oktober 2010

Super!

Nochmals herzlichen Dank! :)

Auswahl - Javascript

JackApple

Neues Mitglied

Gilles

Blogger

JackApple

Neues Mitglied

JackApple

Neues Mitglied

Gilles

Blogger

Loon3y

Neues Mitglied

JackApple

Neues Mitglied

Loon3y

Neues Mitglied

JackApple

Neues Mitglied

Loon3y

Neues Mitglied

JackApple

Neues Mitglied

Loon3y

Neues Mitglied

JackApple

Neues Mitglied

JackApple

Neues Mitglied

Loon3y

Neues Mitglied

JackApple

Neues Mitglied

JackApple

Neues Mitglied

Loon3y

Neues Mitglied

JackApple

Neues Mitglied

Neueste Beiträge