✔ Suchsystem mit Javascript - Bitte helfen

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.

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.
 
hi, also so hab ichs mal gemacht.
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
 
Zuletzt bearbeitet von einem Moderator:
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: 
<!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>
 
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:
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
 
Zuletzt bearbeitet von einem Moderator:
Das wäre die Lösung (ungetestet), damit da nichts mehr da steht, wenn nichts im Suchfeld steht:
Code: 
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: 
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>";
  }
}
 
ich meker ja nicht^^
es is ja schon nett, das du es versucht hast :)

EDIT:
Mein vater hatte grad noch eine Idee. Kann man es so machen, dass er nicht nur die wörter mit anfangsbuchstaben sucht, sondern auch mitten im wort,
also wenn man A eingibt, zeigt er nicht nur "albern" sondern auch Spaß"
Oder is das arg kompliziert?
 
Zuletzt bearbeitet:
habs gelöst

Javascript: 
  if(k.indexOf(foobar) === 1) {
    out += "<a href=" + index[k] + ">" + k + "<br><\a>";
  }
}
                
                suggestions.innerHTML = out;
        };
einfach die === 0 durch === 1 ersetzen, dann sucht er auch mittem im wort.

DEIT:
war doch nicht die Lösung ;( er sucht nur nach dem 2. Buchstaben
 
Zuletzt bearbeitet von einem Moderator:
hi,
da es hier bissle unübersichtlich wird, versuche ich mal alles zusammenzufassen.

1. Links in den Vorschlägen:
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>";
  }
}
hat funktioniert.
2. Beim löschen des inhaltes, keine vorschläge anzeigen:
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;
};
Geht leider nicht (war auch nicht getestet)
3.Buchstaben auch mitten in den Wörtern suchen.
Javascript: 
  if(k.indexOf(foobar) === 1) {
    out += "<a href=" + index[k] + ">" + k + "<br><\a>";
  }
}
                
                suggestions.innerHTML = out;
        };
war mein versuch, ging leider nicht, da er jetzt einfach nur den 2. Buchstaben sucht ;(

4. Großes Problem.
In der datenbank habe ich viele Variationen eingebaut (Groß- klein- getrennt- und Zusammenschreibung etc.) Die werden dann natürlich alle angezeigt.
kann man es so machen, dass:

Das Wort ist z.B. Critical
kann man eingeben:
Critical
critical
crit
Crit
Krit
krit
kritical
...

aber es soll bei den Vorschlägen nur "Critical" angezeigt werden.

Mein erster gedanke war, diese anzuzeigenenden begriffe in eine extra datenbank zu packen, aber das geht nicht, da dann die ganzen anderen da nicht drinnstehen, und er also nichts anzeigen würde.
Was meint ihr?



-Nochmals vielen dank für eure hilfe und tipps
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück