Suchsystem mit Javascript - Bitte helfen @ tutorials.de: Tutorials, Forum & Hilfe

Eli- · 07.05.11 09:57

hi,

Ich brauch so ein Suchsystem für meine Website.
Ich weiß leider nicht so genau wie das geht.
Ich habe auch kein PHP und MySql zur verfügung, also muss es mit JS gehen

erstmal, was ich genau machen möchte:

Auf einer Seite ist ein Suchfeld.
Dort tippt man was ein, z.B. "Testeintrag"
und dann wird man auf eine andere Seite weitergeleitet.
Ich weiß soviel, das dies mit einer If-then Struktur geht, was auch kein problem für mich wäre, doch da es recht viele Sucheinträge werden, würde der Code extrem lang werden.
Kann man jetzt diese Sucheinträge in einem externem Textdokument speichern?
Also das da in dem Textdokument steht:

If "Testeintrag" then go to url
If "Testeintrag2" then go to url2
If "Testeintrag3" then go to url3
...

oder so was.
das dann auf der Seite nur ein kleiner code ist, und der rest in einem externen Dokument

Hoffe ihr könnt mir helfen

schon mal danke

Lg
Dennis

***CPoly*** · 07.05.11 10:46

Am einfachsten würdest du das Textdokument als JavaScript einbinden und etwa so aufbauen

Code javascript:

var index =
{
    "Testeintrag1": "url1",
    "Testeintrag2": "url2",
    "Testeintrag3": "url3"
};

Jetzt bindest du das in deine Seite ein vor deinem eigentlichen Code. Und anstelle des if-else Konstruktes einfach sowas

Code javascript:

var foobar = textfeld.value;
 
if(foobar in index) {
    window.location = index[foobar];
}

Eli- · 07.05.11 11:03

hi erstmal danke für die schnelle Antwort

Irgendwie steh ich grad auf dem Schlauch:
javascrip.js:

Code javascript:

var index =
{
    "test": "http://www.google.de/",
    "Testeintrag2": "url2",
    "Testeintrag3": "url3"
};

die test.html:

Code :

<head>
 
<script type="text/javascript" src="javascrip.js"></script>
 
</head>
 
<body>
<script type="text/javascript">
var foobar = textfeld.value;
 
if(foobar in index) {
    window.location = index[foobar];
}
</script>
 
<input type="text" name="textfeld">
<input type="submit" value="suchen">
</body>

es geht leider nicht.
Was mache ich falsch?
schon mal danke

***CPoly*** · 07.05.11 11:35

1. Wo kommt die Variable "textfeld" her? Da sollte eine Referenz auf ein Textfeld hin.
2. Dein Code wird ausgeführt, bevor das Textfeld und der Button überhaupt existieren.

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Suche</title>
</head>

<body>
	<input type="text" id="textfeld">
	<input type="button" value="suchen" id="button">
	
	<script type="text/javascript" src="index.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	var textfeld = document.getElementById("textfeld");
	var button = document.getElementById("button");
	
	button.onclick = function() {
		var foobar = textfeld.value;
		
		if(foobar in index) {
			window.location = index[foobar];
		}
	};
	/* ]]> */
	</script>
</body>

</html>

Eli- · 07.05.11 11:38

hi danke

Komisch. Ich hab son Buch zu JS da steht das so wie oben bei mir drin, mit den Variabeln und so.
Oder ich habs falsch verstanden.

Auf jeden Fall danke

Lg
Dennis

Eli- · 09.05.11 19:19

hi sry wenn ich nerv

ich habe noch eine frage:
kann man den code so erweitern, das er schon anfängt die datenbank zu durchsuchen, wenn man einen Buchstaben eintippt? Also im Prinzip wie bei Google

Wäre echt cool, wenn ihr mir dabei noch helfen könntet

Schon mal danke und Lg
Dennis

***CPoly*** · 09.05.11 19:40

Es gibt für das Textfeld ein Ereignis namens "keyup". Darauf solltest du reagieren und dann über alle Einträge im Index iterieren (for(k in index) {...}) und prüfen ob es damit beginnt.

Versuch es mal und wenn es nicht klappt, zeig mal her und wir helfen dir. Hab es in 14 Zeilen (mit Whitespace) eingebaut. Also schwer ist es nicht.

Eli- · 09.05.11 19:53

hi,
danke nur was ist Whitespace?

***CPoly*** · 09.05.11 20:04

Damit sind Zeichen gemeint, die in der Regel nicht dargestellt werden (Leerzeichen, Tab, Zeilenumbruch). Ich wollte damit nur sagen, dass in den 14 Zeilen sogar Leerzeilen dabei sind (die man ja zur Formatierung verwendet), also wirklich nicht viel dahinter steckt. Zeilen zählen ist ja ohnehin so eine Sache, da man auch alles in eine Zeile schreiben könnte.

Edit: Ich meinte damit natürlich nicht die Programmiersprache "Whitespace" :-D. In meinem Post fehlt noch ein "s" hintendran.

Eli- · 09.05.11 20:22

hi also ich hab mal bissle rumprbiert:

Code javascript:

textfeld.onkeyup = function() {
                  var k = textfeld.value
                 (for(k in index) {
 
                 
                 if(k in index) {
                                 
                 }
                 }
                 )
                 
        };

Ich habe mich am oberen Code orientiert

nach dem if(k in index) { weiß ich leider auch nict mehr weiter, sry.
Wär das for nich im klammern, wäre es glaub ich ein bisschen einfacher.
Is der Code komplett falsch, oder ist ein teil richtig *Hoffnung*

Schon mal danke

***CPoly*** · 09.05.11 21:29

Dein Index ist ein Objekt. Also eine Liste von Schlüsseln und Werten (key/value). Und über alle Elemente kann man mit for...in iterieren.

Code javascript:

var index = {
    "a": "foo",
    "b": "bar"
};
 
for(var k in index) {
    //In "k" steht der Schlüssel drin. Z.B. "a". Und mit den eckigen Klammern kann man auf den Wert zugreifen, wenn man den Schlüssel kennt
    alert(index[k]);
}

Jetzt kannst du also die Eingabe (textfeld.value) mit "k" in der Schleife vergleichen und alle Treffer ausgeben.

Eli- · 09.05.11 21:50

hi, also so hab ichs mal gemacht.

Code javascript:

var index = {
    "a": "foo",
    "b": "bar"
};
 
textfeld.onkeyup = function() {
 
for(var k in index) {
    //In "k" steht der Schlüssel drin. Z.B. "a". Und mit den eckigen Klammern kann man auf den Wert zugreifen, wenn man den Schlüssel kennt
    textfeld.value = (index[k]);
}
}

Bloß 1. erscheint bei egal welchem Buchstaben nur "bar" im textfeld und 2. erscheint es halt im textfeld und nicht unter ihm, als auswahl, wie bei google.
aber es kommt dem schon näher

hoffe ich

***CPoly*** · 10.05.11 09:04

Du musst ja in der Schleife auch irgendwas sinnvolles machen. Im Moment setzt du immer nur den Wert des Textfeldes um, deshalb steht natürlich am Ende der letzte Wert des Index im Textfeld. Hier mal meine Lösung. Erweiterung von Post #4

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Suche</title>
</head>

<body>
	<input type="text" id="textfeld">
	<input type="button" value="suchen" id="button">
	<p>
		<ul id="suggestions"></ul>
	</p>
	
	<script type="text/javascript" src="index.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	var textfeld = document.getElementById("textfeld");
	var button = document.getElementById("button");
	var suggestions = document.getElementById("suggestions");
	
	button.onclick = function() {
		var foobar = textfeld.value;
		
		if(foobar in index) {
			window.location = index[foobar];
		}
	};
	
	//Bei jedem Tastendruck
	textfeld.onkeyup = function() {
		var foobar = textfeld.value;
		var out = "";
		
		for(var k in index) {
			//Fängt der Wert mit der Eingabe an?
			if(k.indexOf(foobar) === 0) {
				out += "<li>" + k + ": " + index[k] + "</li>";
			}
		}
		
		suggestions.innerHTML = out;
	};
	/* ]]> */
	</script>
</body>

</html>

Eli- · 10.05.11 14:07

hi,
danke.

Also, wenn ich das jetzt sehe, ist es schon irgenwie einfach gewesen.

Ich wollte nur jetzt noch versuchen, die Vorschläge zu verlinken, anstatt die Url anzuzeigen.
hier mein Versuch:

Code javascript:

for(var k in index) {
                        //Fängt der Wert mit der Eingabe an?
                        if(k.indexOf(foobar) === 0) {
                        out += "<a href="index[k]"><li>" + k + ": " + index[k] + "<\li><\a>";
                        }
                }

Leider geht es so garnicht mehr. Aber index[k] ist doch im prinzip der Link, oder?

EDIT:
Kann man das noch so machen, dass es, wenn man nichts eintippt auch nichts anzeigt, weil wenn man jetzt was eintippt, und wieder löscht, kommt alles aus der Datenbank.
Für einen Tipp wäre ich hilfreich.

wenn du es dir mal anschauen möchtest:
Demonwars.de/datenbank/

danke

***einfach nur crack*** · 10.05.11 14:44

Das wäre die Lösung (ungetestet), damit da nichts mehr da steht, wenn nichts im Suchfeld steht:

Code Javascript:

textfeld.onkeyup = function() {
  var foobar = textfeld.value;
  var out = "";
  
  if(foobar != "") {
    for(var k in index) {
      //Fängt der Wert mit der Eingabe an?
      if(k.indexOf(foobar) === 0) {
        out += "<li>" + k + ": " + index[k] + "</li>";
      }
    }
    
  suggestions.innerHTML = out;
};

Zu deinem ersten Problem: Konkatenation von Zeichenketten wird in Javascript mit dem Plus als Konkatenationsoperator gelöst:

Code Javascript:

for(var k in index) {
  //Fängt der Wert mit der Eingabe an?
  if(k.indexOf(foobar) === 0) {
    out += "<a href=" + index[k] + "><li>" + k + ": " + foobar + "<\li><\a>";
  }
}

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

JBoss Scheduler wie Publizieren bitte bitte helfen

wer kann mir helfen zum thema ik und robotern in cinema bitte bitte

Javascript Grafik als Checkbox Problem Bitte Helfen, sehr dringend

Wer kann mir da BITTE BITTE helfen

Bitte bitte helfen: Einbinden unter Knoppix

Stichworte

E-Mail:

Abonnieren Abbestellen