coltseavers
Goto Top

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

Content-Key: 391807

Url: https://administrator.de/contentid/391807

Ausgedruckt am: 28.03.2024 um 10:03 Uhr

Mitglied: eisbein
eisbein 07.11.2018 aktualisiert um 06:47:54 Uhr
Goto Top
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
$('#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);  
Mitglied: 137443
Lösung 137443 07.11.2018 aktualisiert um 07:39:30 Uhr
Goto Top
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.
Mitglied: coltseavers
coltseavers 07.11.2018 um 13:40:25 Uhr
Goto Top
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.

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
Mitglied: 137443
137443 07.11.2018 aktualisiert um 13:58:53 Uhr
Goto Top
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
Mitglied: coltseavers
coltseavers 07.11.2018 um 14:12:28 Uhr
Goto Top
<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.
Mitglied: 137443
Lösung 137443 07.11.2018 aktualisiert um 14:17:15 Uhr
Goto Top
Ist doch logisch weil dein div ja erst mal 100% breit ist. Also floaten mit float und Größe definieren. Gibt viele Möglichkeiten.
Mitglied: coltseavers
coltseavers 08.11.2018 um 09:34:22 Uhr
Goto Top
Hi ho,

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> 
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