Suchfunktion in HTML mit Action

[DeadDoozer]

Hey Leute,

brauche dringend Hilfe, versuche gerade eine Suchfunktion auf meiner Website zu integrieren, mein Problem ist aber, dass ich nicht annähernd weiß wie ich an die Sache herangehen soll. Das Ganze soll so funktionieren, dass wenn man einen Begriff in das Suchfeld eingibt, beispielsweise "Berlin", dass auf einer nächsten Seite die mit dem Klick auf das Suchsymbol entsprechend alle für den Begriff angelegten Objekte angezeigt werden. Wenn man das so beschreiben kann... wie gesagt, ich weiß nicht mehr weiter =P

Hoffe sehr auf hilfreiche Antworten

 

[Tada100]

Das ist relativ einfach, kannst dich ja beim Firefox bedienen .
One sec pls...Das ganze muss natürlich noch angepasst werden und soll nur als Beispiel dienen!

Spoiler

https://codepen.io/zomtjbsu/pen/MqVqpa

<div class="search-wrapper">
<div class="search-inner-wrapper">
<label for="newtab-search-text" class="search-label">
<span class="sr-only">
<span>Das Web durchsuchen</span>
</span>
</label>
<input type="search" id="newtab-search-text" maxlength="512" placeholder="Das Web durchsuchen" title="Das Web durchsuchen" autocomplete="on" aria-autocomplete="true" aria-controls="searchSuggestionTable" aria-expanded="false">
<button id="searchSubmit" class="search-button" title="Suchen">
<span class="sr-only"><span>Suchen</span>
</span>
</button>
<table id="searchSuggestionTable" class="contentSearchSuggestionTable" role="presentation" hidden="">
<tr class="contentSearchHeaderRow">
<td class="contentSearchHeader" id="contentSearchDefaultEngineHeader"><img src="pic/blabla.jpg">Suchen mit Google</td>
</tr>
<tr class="contentSearchSuggestionsContainer"><td class="contentSearchSuggestionsContainer">
<table class="contentSearchSuggestionsList" role="listbox"></table>
</td>
</tr>
<table class="contentSearchOneOffsTable contentSearchSuggestionsContainer" role="group">
<tr class="contentSearchHeaderRow">
<td class="contentSearchHeader" id="contentSearchSearchWithHeader">
<label>Suchen mit:</label>
<label class="contentSearchSearchWithHeaderSearchText">
</label>
<label></label>
</td>
</tr>
</table>
<button class="contentSearchSettingsButton contentSearchHeaderRow contentSearchHeader" id="contentSearchSettingsButton" aria-selected="false">Sucheinstellungen ändern</button>
</table>
</div>
</div>

 

[SomeDifferent]

Nur mit HTML wirst du da nicht weit kommen. Auf welche Technologien setzt du denn im Backend?

Grundsätzlich : Suchbefehl an das Backend weiterleiten -> Backend wertet Daten aus -> Ergebnis anzeigen.

 

[DeadDoozer]

Vielen Dank für eure Antworten, hilft mir beides sehr!

 

[FranzvonAssisi]

Allerdings ist es auch eine Option, gerade bei PWAs mit begrenzter Ergebniszahl, lokal zu filtern.

Bsp.: Du hast eine Liste mit deutschen Städten, diese werden beim Seitenaufruf komplett geladen.
Hier kann eine Suche lokal via Javascript stattfinden, da bereits alle Objekte geladen sind. Eine Anfrage an den Server wäre hier überflüssig.

Lg

 

[DeadDoozer]

Allerdings ist es auch eine Option, gerade bei PWAs mit begrenzter Ergebniszahl, lokal zu filtern.

Bsp.: Du hast eine Liste mit deutschen Städten, diese werden beim Seitenaufruf komplett geladen.
Hier kann eine Suche lokal via Javascript stattfinden, da bereits alle Objekte geladen sind. Eine Anfrage an den Server wäre hier überflüssig.

Lg

Hättest du dazu vielleicht auch Material, was man sich mal anschauen könnte? Klingt in jedem Fall schlüssig

Danke, LG