AJAX - Inputfeld - Dropdown mit Vorschlägen aus der Datenbank

[Franki]

Tach!

Ich möchte gerne eine Art Autovervollständigung umsetzen.
Wenn ich also in der Datenbank stehen habe:

name
--------
Ferdinant
Franz
Friedolin
Friedhelm
Peter
Luisa
Kathi

und ich ins Inputfeld eingebe: Fr
dann soll das etwa so aussehen

Fr
---------
Franz
Friedolin
Friedhelm

gebe ich nun noch ein i ein dann steht da:

Fri
---------
Friedolin
Friedhelm

Umzusetzen ist das wohl mit AJAX. Mein Ansatz wäre jetzt so:
Bei onchange ruft AJAX eine Datei mit einem PHP-Skript auf und dieser sucht sich die Begriffe per Like raus und zeigt sie an, aber wie setze ich nen Kasten unter das Inputfeld, also wie lässt sich das am besten per CSS daran haften.

Und noch ein viel größeres Problem. Was ist wenn ich 500.000 Namen habe?
Diese werden ja jedes mal durchsucht..

Dank vom Frank

[Kalle_B]

auch Tach!

Umzusetzen ist das wohl mit AJAX.

Ja.

Mein Ansatz wäre jetzt so:
Bei onchange ruft AJAX eine Datei mit einem PHP-Skript auf

zu spät. OnChange triggert erst, wenn das Eingabefeld verlassen wird und der Inhalt geändert wurde.

Du brauchst den Event-Handler KeyUp, um nach jedem Tastendruck reagieren zu können.

Und noch ein viel größeres Problem. Was ist wenn ich 500.000 Namen habe?
Diese werden ja jedes mal durchsucht..

Naja, auf jeden Fall musst du in SQL mit LIMIT arbeiten, um die Fundmenge zu begrenzen.

Kalle

[EKKi]

Mahlzeit Franki,

Bei onchange ruft AJAX eine Datei mit einem PHP-Skript auf und dieser sucht sich die Begriffe per Like raus und zeigt sie an,

Ich würde eher "http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onkeyup@title=onkeyup" vorschlagen - so wird jedesmal, wenn der Benutzer ein Zeichen mehr eingegeben hat, die Vorschlagsliste neu erstellt (sinnvollerweise startet die Suchfunktion erst, wenn mindestens x Zeichen eingegeben wurden).

aber wie setze ich nen Kasten unter das Inputfeld, also wie lässt sich das am besten per CSS daran haften.

Zweckmäßigerweise über eine sinnvolle Kombination von http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Positionsangaben:

div.container {  
  position: relative;  
}  
  
div.container input {  
  position: relative;  
}  
  
div.container div.suggest {  
  position: absolute;  
  top:      1em;  
}

<divclass="container">  
  <input type="text" name="foobar">  
  <div class="suggest"></div>  
</div>

(Dies als einfachen Vorschlag - Du solltest das natürlich Deinen Wünschen entsprechend anpassen!)

Und noch ein viel größeres Problem. Was ist wenn ich 500.000 Namen habe?
Diese werden ja jedes mal durchsucht..

Hat Deine Tabelle keine geeigneten Indizes?

MfG,
EKKi