Suchfeld mit Vorschlägen

[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