Search Bar mir HTML, CSS; Java?
Wie kann ich eine Search Bar mit HTML, CSS und Java Code machen? Ich möchte, dass wenn man was eingibt, eine neue Seite geöffnet wird und auf dieser dann die Suchergebnisse angezeigt werden.
Die Suchergebnisse von was?
Von der Seite. Also man gibt ein Wort ein und wenn das Wort auf der Seite vorkommt soll es angezeigt werden
3 Antworten
Sofern es sich um einen One Pager handelt, könnte man anfangs hinterfragen, ob es einer Eigenimplementation dieser Funktionalität sowie eine extra Ergebnisseite braucht. Die Suchfunktion des Browsers findet schon zuverlässig alle nicht ausgeblendeten Inhalte. Andernfalls könnte auch schon eine Implementation mit JavaScript genügen (Bsp.: rekursive Suche im DOM nach Elementen, die ein Suchwort beinhalten).
Wenn man aber nun einmal annimmt, dass deine Webseite aus mehreren Unterseiten besteht, dann sollten alle durchsuchbaren Inhalte separiert von HTML und CSS indexiert in einer externen Datenquelle (Datenbank/CSV-Datei/o.ä.) liegen. Je nach Datenquelle gestaltet sich die Suche anders. Eine Datei könnte man komplett auslesen und dann mit einem regulären Ausdruck durchsuchen. Bei einer SQL-Datenbank kann ein SELECT-Query mit LIKE-Operator genügen oder man nimmt sich die Lucene-Bibliothek zu Hilfe.
Lege dir für den Suchvorgang am besten eine eigene Klasse an.
Für die Datenverarbeitung brauchst du in deinem HTML-Dokument ein Formular mit Eingabefeld und Button.
<form action="/search">
<input name="searchword">
<button>Search</button>
</form>
Das action-Attribut verweist hierbei auf den Request Handler, der die Suche durchführen soll. Wie der Request Handler konkret implementiert wird, hängt davon ab, mit welchem Java-Toolset/Framework du arbeitest (JakartaEE/Spring MVC/Play/...). Ich führe hier nur ein kurzes/angedeutetes JakartaEE MVC-Beispiel (mit JSF) an:
@Path("/search")
@Controller
public class SearchController {
@Inject
SearchResult result;
@GET
public String get(String searchword) {
// param validation ...
var searchManager = new SearchManager();
result.setItems(searchManager.search(searchword));
return "searchresults.xhtml";
}
}
Der Request Handler muss die Eingabe des Formulars lesen (und validieren), anschließend kann der Suchprozess starten, der in meinem Beispiel in der Klasse SearchManager definiert wird. Die Ergebnisse kommen in ein Modelobjekt,
@Named
@RequestScoped
public class SearchResult {
private List<SearchResultItem> items;
}
mit dem die Platzhalter im View gefüllt werden.
<!doctype html>
<html xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Search results</title>
<meta charset="utf-8">
</h:head>
<h:body>
<h1>Search results:</h1>
<ul rendered="#{not empty result.items}">
<ui:repeat var="item" value="#{result.items}">
<li><a href="#{item.url}">#{item.name}</a></li>
</ui:repeat>
</ul>
</h:body>
</html>
Eine nachträglichere Erweiterung könnte Suchergebnisse assoziativ zu ihrem Suchbegriff für eine bestimmte Zeit zwischenspeichern. Wenn bei einer Suche der Suchbegriff schon im Speicher vorliegt, wird das zugehörige Ergebnis zurückgeliefert. Die Suchoperation, die andernfalls notwendig gewesen wäre, kann man sich sparen.
Da du leider gar keine Angaben zu deinem Setup gemacht hast ist davon auszulegen, dass du alles einfach als HTML Dateien rumliegen hast? In dem Falle solltest du einfach ein CMS benutzen, das würde dein Problem lösen.
Ansonsten solltest du dringen mal Programmiergrundlagen lernen und dir allgemeines Wissen zur Webentwicklung aneignen. Da sind so viele Lücken ich wüsste leider gar nicht wo ich ansetzen sollte mit der Erklärung. Schau dir lieber ein paar Grundlagentutorials an oder besorge dir ein Buch oder zwei.
In dem man nach möglichkeit erst einmal die Sprachen lernt. Dann kann man sich anschließend die Funktion auch zusammen basteln.