• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Searchbar funktion hinzufügen

P

Peterneu27

Neues Mitglied
Hallo Liebe Community,

Ich habe erneut eine Frage und zwar würde ich gerne über eine Searchbar (nur für die Seite) gerne Textstellen oder bilder makieren lassen sobald der benutzer nach seiner texteigabe auf den butten klickt.

Leider habe ich nichts gefunden was mir da wirklich weiterhelfen könnte oder was sich gut einfügen lässt.
Daher nun die Frage ob ihr ein e idee hab wie ich das machen könnte.

Meine derzeitige Searchbar sieht so aus:

<div class="topnav-search" id="myTopnav">
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
 
Werbung:
Also das Prinzip dahinter ist folgendes:
Erstmal überlegst du dir, ob die Funktion per Submit-Button oder per onkeydown aktiviert wird.
Für was auch immer du dich entscheidest, das Prinzip ist das gleiche:
Javascript (sofern es nicht Seitenübergreifend ist), sucht im kompletten HTML-Document (body) nach diesem eingegebenen Wörtern und Buchstaben und markiert diese (wenn du willst auch in anderer Farbe). Das war es eigentlich schon. Bei onkeydown wird dann also der entsprechende event-listener gesetzt und bei jedem Tastendruck neu überprüft. Es ist dabei sinnvoll ein Timeout zu setzen, um keine Performanceprobleme beim schnellen Tippen zu bekommen. Wenn der User also eine bestimmte Zeit nicht getippt hat, wird durchsucht.

Ich hatte mal eh vor, eine eigene Funktion dafür zu machen (Jquery basiert). Aber anstatt auf meine Lösung zu warten, von der nicht mal klar ist wann und ob, mach dir eigene Überlegungen und Google dir den Kram zusammen wenn nötig. Weitere Fragen kannst du dann ja hier klären.

Ich hoffe das war verständlich um das Grundprinzip dahinter zu verstehen.
 
Eine Idee hätte ich schon, nur ob die dem entspricht, was du haben willst und ob das überhaupt so funktioniert, müsste noch geprüft werden.
Zunächst mal würde ich das <form action=....> so einstellen, dass die Seite sich selbst aufruft.
Als Erstes im Code (dieser Seite) dann eine Abfrage, ob 'search' übermittelt wurde,
Wenn nein, Seite so ausliefern, wie sie ist.
Wenn ja:
Seite mit 'file_get_contents($datei)' in eine Variable einlesen.
Dann in dieser Variablen den Suchbegriff $search austauschen durch $ersatz= "<span class="markiert">".$search."</span>"....str_replace($search, $ersatz, $datei)
Dann mit echo statt der Originaldatei die modifizierte $datei ausgeben.

Aber wie gesagt.. nur eine Idee. Ob es so geht musst du ausprobieren.
 
Werbung:
Hab ich befürchtet :(! Aber wenn dir hier ein fertiger Code geliefert wird, dann hast du nichts gelernt außer copy&paste.
Wie weit reicht denn deine 'sehr wenige Erfahrung'? Bist du in der Lage auf deinem Rechner PHP Scripte zu schreiben und zu testen?
Bist du in der Lage die von deinem Formular übermittelte Variable auszulesen und weiterverarbeiten?
Weißt du was mit einer 'if' Abfrage anzufangen?
 
Also ich habe mich eigentlich nicht mit php befasst und wie man eine Variable ausließt. Was eine if ist weiß ich aber aus C,C++,Java,C#
 
Werbung:
@Sempervivum meine Idee wäre hier mit "filter" von CSS zu arbeiten.
Da könnte man bestimmt was gutes draus machen und das gesamte Bild markieren, sodass es klar erkennbar ist.
 
Dann sind wir ja schon einen Schritt weiter. Grundkenntnisse im Programmieren sind also vorhanden - und wenn es nur um Markierung des Suchbegriffes geht, vereinfacht das die Sache ganz ungemein.
Aber zunächst der Startpunkt zu deinem Problem:
Du hast ein Formular, in dem man einen Suchbergriff eingeben kann - dieser Suchbegriff muss zunächst, wenn man auf 'Suchen' klickt, übergeben und ausgelesen werden werden.
Diese Übergabevariable kann mittels der Methoden 'POST' oder 'GET' in PHP an eine Datei übergeben werden, die du als ' action="DATEI.PHP" ' in deinem <form...> Tag festlegst.
In deinem Fall solltest du die gleiche Datei aufrufen, in der dein Suchformular ist.
Also zb - deine Datei hat den Namen index.php, dann muss dein Formular so aussehen..
<form action="index.php" name="suchformular" method="post">
.....
</form>

Schau die das hier mal an
https://www.php-einfach.de/php-tutorial/_get-und-_post/
und melde dich, wenn du in der Lage bist das übermittelte Suchwort nach dem Klick auf 'Suchen' auszulesen.
 
Werbung:
Sailor schrieb:
Dann sind wir ja schon einen Schritt weiter. Grundkenntnisse im Programmieren sind also vorhanden - und wenn es nur um Markierung des Suchbegriffes geht, vereinfacht das die Sache ganz ungemein.
Aber zunächst der Startpunkt zu deinem Problem:
Du hast ein Formular, in dem man einen Suchbergriff eingeben kann - dieser Suchbegriff muss zunächst, wenn man auf 'Suchen' klickt, übergeben und ausgelesen werden werden.
Diese Übergabevariable kann mittels der Methoden 'POST' oder 'GET' in PHP an eine Datei übergeben werden, die du als ' action="DATEI.PHP" ' in deinem <form...> Tag festlegst.
In deinem Fall solltest du die gleiche Datei aufrufen, in der dein Suchformular ist.
Also zb - deine Datei hat den Namen index.php, dann muss dein Formular so aussehen..
<form action="index.php" name="suchformular" method="post">
.....
</form>

Schau die das hier mal an
https://www.php-einfach.de/php-tutorial/_get-und-_post/
und melde dich, wenn du in der Lage bist das übermittelte Suchwort nach dem Klick auf 'Suchen' auszulesen.
Zum Vergrößern anklicken....
Es muss aber doch nicht unbedingt PHP sein.
@Peterneu27 müsste uns mal die Info geben, ob er das ganze Seitenübergreifend oder nur auf der jeweiligen Seite durchführen will. Ansonsten würde nämlich Javascript reichen.
 
@Aaron3219 ... stimmt, viele Wege führen nach Rom. Wenn jedoch die Frage mit einem einem Formular beginnt, ist PHP eine naheliegende Möglichkeit.

Hab's auch gerade getestet... mit etwa 13 Zeilen PHP Code ist die Sache zu erledigen.
Allerdings nur Textmarkierung und nur auf der einen Seite - aber so habe ich den TE auch nur verstanden.
 
Werbung:
Wie hast du das denn ohne neuladen der Seite realisiert? Du müsstest dann ja noch einen Ajax-Resquest einbauen, der aber eigentlich auch dufch eine Javascript-Funktion ersetzt werden könnte.
 
Werbung:
Aaron3219 schrieb:
Dann wird die Sache schon mal komplizierter. Du müsstest dir dann erstmal Gedanken darüber machen, wie du die Suchergebnise darstellen willst.
Zum Vergrößern anklicken....

Peterneu27 schrieb:
Die sollten nur markiert werden
Zum Vergrößern anklicken....
Du kannst ja nicht irgendwelche Wörter auf 2 Seiten markieren... da hast du wohl einen Denkfehler.

Sempervivum schrieb:
Wenn es nur um Textsuche geht, so erledigt das doch schon die Suchfunktion des Browsers?
Zum Vergrößern anklicken....
Das was er sagt.

Sailor schrieb:
@Aaron3219 - mit der PHP Methode muss die Seite neu geladen werden, denn die Markierung der Textpassagen kann mit PHP nur serverseitig durchgeführt werden.
Zum Vergrößern anklicken....
Ja ist ja auch klar, ist ja PHP. Aber mit Ajax-requests müsstest du trotzdem das neuladen verhindern können. Das ist ja auch der gängige Weg.
 
Werbung:
Wenn man bei Codepen ein bischen sucht findet man auch schon fertige Scripte die dir die Suchergebnisse makieren. Nur als Hinweiß gedacht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben