7
Suchergebnisliste soll andere Inhalte überlagern
Hallo zusammen,
in einem Formular soll man "live" einen Namen in einer Datenbank suchen können.
Man gibt die ersten 2 Buchstaben in einem <input type="text"> ein, und darunter soll eine Liste mit den Suchergebnissen aus der Datenbank erscheinen, die sich nach Eingabe eines weiteren Buchstabens weiter aktualisieren.
Generell habe ich mit Ajax und PHP die Funktionalität soweit hinbekommen mit der Live-Aktualisierung.
(Eine Eingabe (keyup) löst eine Javascript-Funktion aus, die die eingegeben Daten an ein PHP-Script sendet, welches das Suchergebnis aus der Datenbank ermittelt und zurückgibt. Das zurückgegebene Suchergebnis wird in einem <div> als Liste ausgegeben).
Das Problem ist, dass Suchergebnisliste den nachfolgenden Inhalt nach unten verdrängt, was unschön ist.
Die Suchergebnisliste soll im Vordergrund über dem restlichen Inhalt liegen - ihn also überlagern, nicht verdrängen.
Und sie soll unter dem Texteingabefeld positioniert sein.
Wie bekomme ich das hin?
Vielen Dank vorab!
Gruß,
Colt
in einem Formular soll man "live" einen Namen in einer Datenbank suchen können.
Man gibt die ersten 2 Buchstaben in einem <input type="text"> ein, und darunter soll eine Liste mit den Suchergebnissen aus der Datenbank erscheinen, die sich nach Eingabe eines weiteren Buchstabens weiter aktualisieren.
Generell habe ich mit Ajax und PHP die Funktionalität soweit hinbekommen mit der Live-Aktualisierung.
(Eine Eingabe (keyup) löst eine Javascript-Funktion aus, die die eingegeben Daten an ein PHP-Script sendet, welches das Suchergebnis aus der Datenbank ermittelt und zurückgibt. Das zurückgegebene Suchergebnis wird in einem <div> als Liste ausgegeben).
Das Problem ist, dass Suchergebnisliste den nachfolgenden Inhalt nach unten verdrängt, was unschön ist.
Die Suchergebnisliste soll im Vordergrund über dem restlichen Inhalt liegen - ihn also überlagern, nicht verdrängen.
Und sie soll unter dem Texteingabefeld positioniert sein.
Wie bekomme ich das hin?
Vielen Dank vorab!
Gruß,
Colt
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 391807
Url: https://administrator.de/contentid/391807
Printed on: April 24, 2024 at 04:04 o'clock
7 Comments
Latest comment
Guten Morgen,
Das hängt davon ab, wie du dein Suchergenis im <div> anzeigst.
Wenn es zB. normale Textausgabe ist, kannst du den Inhalt des <div> in etwa so erstellen.
Ajax-Code für Keyup-Funktion
Wobei #div nun die ID des <div> ist.
Suchergebnis ist dann dein aktuelles Suchergebnis
Gruß
eisbein
Edit:
Wenn du immer nur das aktuelle Suchergebnis anzeigen willst, dann
Das hängt davon ab, wie du dein Suchergenis im <div> anzeigst.
Wenn es zB. normale Textausgabe ist, kannst du den Inhalt des <div> in etwa so erstellen.
Ajax-Code für Keyup-Funktion
$('#div').html(Suchergebnis+$('#div').html()); Wobei #div nun die ID des <div> ist.
Suchergebnis ist dann dein aktuelles Suchergebnis
Gruß
eisbein
Edit:
Wenn du immer nur das aktuelle Suchergebnis anzeigen willst, dann
$('#div').html(Suchergenis); 
Versehe das DIV im CSS mit position:absolute
und packe dieses dann zusammen mit dem Eingabefeld in ein DIV mit position:relative positionieren es unter dem Eingabefeld und einem größeren Z-Index als die anderen Elemente.
Oder nimm gleich das in jQuery eingebaute Livesearch
Gruß l.
und packe dieses dann zusammen mit dem Eingabefeld in ein DIV mit position:relative positionieren es unter dem Eingabefeld und einem größeren Z-Index als die anderen Elemente.
Oder nimm gleich das in jQuery eingebaute Livesearch
Gruß l.
Zitat von @137443:
Versehe das DIV im CSS mit position:absolute
und packe dieses dann zusammen mit dem Eingabefeld in ein DIV mit position:relative positionieren es unter dem Eingabefeld und einem größeren Z-Index als die anderen Elemente.
Oder nimm gleich das in jQuery eingebaute Livesearch
Gruß l.
Versehe das DIV im CSS mit position:absolute
und packe dieses dann zusammen mit dem Eingabefeld in ein DIV mit position:relative positionieren es unter dem Eingabefeld und einem größeren Z-Index als die anderen Elemente.
Oder nimm gleich das in jQuery eingebaute Livesearch
Gruß l.
Ja danke, damit geht es schon in die richtige Richtung.
1 Problem resultiert aber daraus:
Das umgebende div, das das Eingabefeld und das div mit dem Suchergebnis enthält wird nun in einer neuen Zeile dargestellt, was ich aber nicht möchte.
(Denn vor dem Eingabefeld, unter dem auch das Suchergebnis eingeblendet wird kommt in der gleichen Zeile erst noch ein anderes Eingabefeld).
Kann ich das irgendwie arrangieren, dass das so bleibt?
Wenn ich das vorhergehende Eingabefeld mit in den div-block hole wird das Suchergebnis natürlich falsch positioniert.
Gruß,
Colt
Man kann alles aber unsere Glaskugeln sind in Urlaub und sehen deinen Code nicht.
Grundlagen CSS Positionierung solltest du dringend mal lesen
https://www.mediaevent.de/tutorial/css-position-absolute-relative.html
Grundlagen CSS Positionierung solltest du dringend mal lesen
https://www.mediaevent.de/tutorial/css-position-absolute-relative.html
<input type="text" id="plz" name="plz" size="5" maxlength="5" placeholder="PLZ">
<div style="position: relative; z-index: 1;"><input type="text" id="name" name="name" size="10" maxlength="20" placeholder="Name">
<div style="position: absolute; z-index: 99;" class="divueberlappe" id="namevorschlag"></div></div> Nach <input type="text" id="plz" name="plz" size="5" maxlength="5" placeholder="PLZ"> wird nun ein Zeilenumbruch gemacht, was ich aber nicht möchte.
Ist doch logisch weil dein div ja erst mal 100% breit ist. Also floaten mit float und Größe definieren. Gibt viele Möglichkeiten.
Hi ho,
hat geklappt, vielen Dank!
Für die Mitleser:
In jeder Zeile wurde ein float: left; ergänzt.
Im nachfolgenden Absatz wurde ein <div style="clear: left;"> gesetzt, sonst wird dieser auch noch hinten angereiht.
Danke & Gruß,
Colt
hat geklappt, vielen Dank!
Für die Mitleser:
<input type="text" style="float: left;" id="plz" name="plz" size="5" maxlength="5" placeholder="PLZ">
<div style="position: relative; float: left; z-index: 1;"><input type="text" id="name" name="name" size="10" maxlength="20" placeholder="Name">
<div style="position: absolute; float: left; z-index: 99;" class="divueberlappe" id="namevorschlag"></div></div> Im nachfolgenden Absatz wurde ein <div style="clear: left;"> gesetzt, sonst wird dieser auch noch hinten angereiht.
Danke & Gruß,
Colt
