Suchfeld mit Vorschlägen

[hackerboy1993]

Guten Abend,
ich bin auf der Suche nach einem gewissen Skript oder evt. auch nach realisierungshinweisen in Form von Stichworten.

Ich habe eine Tabelle deren Inhalt ich mit Php Fülle.
Für 2 Spalten habe ich einen Filter mit einem Dropdown feld gemacht. Sobald man dann "das Formular" abschickt, zeigt es einem nur noch die gefilterten Ergebnisse an.
Nun möchte ich für eine weitere Spalte einen Speziellen Filter programmieren:
In dieser Tabelle sind Stichwortartige Sätze enthalten. Ich möchte das man in das Filterfeld (Suchfeld) ein Wort eingeben kann und es zeigt einem laufend die passenden übereinstimmungen an.

Ich würde das so realisieren:
1. Javascript Array mit Php Füllen.
2. Bei jedem Buchstaben der ins Suchfeld eingegeben wird, mit einer mir unbekannten Funktion die übereinstimmungen überprüfen und diese dann laufend in der Tabelle ausgeben.

Kennt ihr fertige Scripts die sowas können?
Oder könnt ihr mir die Namen der Funktionen sagen die ich brauche um das zu Bewerkstelligen?

Mit freundlichen Grüssen

Hackerboy1993

[Hase]

Search for: Ajax

Gruß
Hase

[hackerboy1993]

Erstmals Danke für die Antwort.
Ich habe mich erkundigt und gesehen das dies durchaus eine Lösung wäre. Jedoch ist sie sehr kompliziert und erfüllt nur dann ihren Zweck wenn die Daten sich laufend ändern.

Bei meinem Problem sollen jedoch einmal die Daten mit Php in ein JavaScript-Array geschrieben und dann bleiben sie dort bis zum neuaufruf der Seite.
Nun möchte ich das wenn ich zum Beispiel a eingebe alle suchresultate erscheinen die ein "a" enthalten. Ich möchte dabei weder die Seite neuladen, noch via Ajax das neuladen der Seite umgehen. Es geht darum eine schnelle Suchfunktion zu entwickeln...

Mein Lösungsweg sieht so aus:
-Überprüfe Suchfeld und schreibe alle Daten die denn Begriff des Suchfeldes enthalten in ein neues Array.

• Gebe dieses neue Array aus, in Tabellen-Form.

Wie heissen die Funktionen die so was können?

GLG Hackerboy1993

[ChrisB]

Hi,

Mein Lösungsweg sieht so aus:
-Überprüfe Suchfeld und schreibe alle Daten die denn Begriff des Suchfeldes enthalten in ein neues Array.

• Gebe dieses neue Array aus, in Tabellen-Form.

Mein Weg saehe leicht anders aus. Zum einen vielleicht eher eine Liste als eine Tabelle - und zum anderen diese nicht jedes Mal neu aufbauen, sondern nur die Items, die den Suchbegriff enthalten, eingeblendet lassen.

Wie heissen die Funktionen die so was können?

Schleifen und Manipulation von Style-Eigenschaften bzw. Klassennamen per JavaScript sollten unter Grundlagenwissen fallen.
Und zum "Suchen" bzw. Vergleichen brauchst du dann eigentlich nur noch String-Funktionen wie bspw. indexOf. (Regulaere Ausdruecke zum Suchen zu verwenden, duerfte in so einem Falle ja schon wieder ueber's Ziel hinausschiessen.)

MfG ChrisB

[EKKi]

Mahlzeit hackerboy1993,

Ich habe mich erkundigt und gesehen das dies durchaus eine Lösung wäre. Jedoch ist sie sehr kompliziert und erfüllt nur dann ihren Zweck wenn die Daten sich laufend ändern.

Bei meinem Problem sollen jedoch einmal die Daten mit Php in ein JavaScript-Array geschrieben und dann bleiben sie dort bis zum neuaufruf der Seite.

Je nun. Es kommt immer darauf an. Stell Dir vor, Deine Tabelle hat mehrere hundert, tausend oder gar hunderttausend Einträge (ist nicht ganz abwegig - je nach Verwendungszweck): möchtest Du diese alle per PHP aus der Datenbank auslesen, daraus ein Array in Javascript erzeugen, das alles zum Browser schicken und dann diesen bei jedem Tastendruck des Benutzers im Filterfeld das alles durchrödeln lassen?

Oder - andere Frage: handelt es sich vielleicht um Daten, aus denen der Benutzer vielleicht gerne welche per Stichwortsuche auswählen darf, die er aber in seiner Gesamtheit nicht alle zu sehen bekommen soll (Stichwort: Copy'n'Paste von Daten)?

Dann kommst Du um eine "interaktive" Lösung mittels AJAX, mit der Du den auf Deinem Server vorhandenen Datenbestand nur je nach Suchbegriffen gefiltert auszugsweise an den Browser lieferst, nicht herum.

Nun möchte ich das wenn ich zum Beispiel a eingebe alle suchresultate erscheinen die ein "a" enthalten. Ich möchte dabei weder die Seite neuladen, noch via Ajax das neuladen der Seite umgehen. Es geht darum eine schnelle Suchfunktion zu entwickeln...

Genau dafür eignet sich AJAX. Es geht dabei auch nicht darum, das Neuladen der Seite zu umgehen. Ich habe eine derartige Autovervollständigung ungefähr so gelöst (in groben Zügen):

<style type="text/css">  
[code lang=css]  
  
span.av {  
  position:         relative;  
}  
  
span.av div {  
  position:         absolute;  
  top:              1.3em;  
  left:             0;  
  display:          none;  
  border:           1px solid #000;  
  background-color: #fff;  
}

</style>
[...]
<script type="text/javascript">

  
  
function av(e) {  
  e = e || window.event;  
  var elm = e.target || e.srcElement;  
  var key = e.which || e.keyCode;  
  
  /* ab hier dann der Code, der ausgehend vom Inhalt des Elements (bei mir erst ab einer Länge von drei Zeichen, ansonsten wird die Ergebnisliste zu lang) und der gedrückten Taste ggf. per AJAX ein PHP-Skript auf dem Server anfordert, dem den gewünschten Suchbegriff übergibt und als Rückgabe dann in dem <div> eine Liste aller passenden Begriffe ausgibt (die man dann z.B. direkt anklicken und als Wert übernehmen kann) */  
}

</script>
[...]
<span class="av"><input type="text" name="suche" onkeyup="av(event);" autocomplete="off"><div></div></span>[/code]

MfG,
EKKi