Suchfunktion für ungeordnete HTML Liste mit JavaScript?

Hallo,
ich muss eine Aufgabe lösen, bei der ich leider nicht weiter komme. Ich hab eine kleine Homepage mit HTML geschrieben, worauf sich Kurse befinden, die mit einem Link hinterlegt sind. Ich möchte jetzt eine Suchfunktion anlegen um in der ungeordneten Liste an Einträgen schneller auf den gesuchten Eintrag komme. Verwendet werden soll dabei JavaScript.
Hat jemand eine Idee, wie ich das am besten machen kann? Welche Funktion brauche ich dafür?

Beste Grüße
Flo

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

26.05.2021, 17:16

Das ginge zum Beispiel so:

listElements = ... //Die Elemente deiner Liste
searchterm = ... //Der Suchbegriff

for(const el of listElements) {
    if(!el.textContent.toLowerCase().startsWith(searchterm.toLowerCase())) el.style.display = "none";
    else el.style.display = "";
 }

Obiger Code blendet alle Listen-Elemente aus, deren Text nicht mit dem Suchbegriff beginnt. Am besten rufst du das ganze bei oninput auf.

Beispiel-Programm: https://jsfiddle.net/h1Lxfgan/1/

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

Flo721

Beitragsersteller

26.05.2021, 21:10

Super vielen Dank!

whgoffline

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren

26.05.2021, 14:40

Ich würde allen li's eine Klasse geben und dann getElementsByClassName benutzen um über die Elemente zu laufen, dann kannst einfach schauen ob der Text passt.

Woher ich das weiß:Studium / Ausbildung – Informatikstudent

Ähnliche Beiträge

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

Homepage-Baukasten, der HTML-Code ausspuckt

Hallo zusammen,

ich möchte eine eigene Homepage erstellen. Kenntnisse in HTML, CSS, JavaScript, PHP und MySQL sind zwar vorhanden, aber ich bin vor allem zu faul, den statischen Code (also HTML, CSS und JavaScript) zu schreiben, weil das so lange dauert. Außerdem bin ich im Designen nicht so gut. Deshalb wollte ich mir die Arbeit von einem Homepagebaukasten abnehmen lassen, der am Ende HTML-, CSS-, und JavaScript-Code ausspuckt, sodass ich hier am Design nichts mehr schreiben muss. Leider laufen die meisten Homepagebaukasten direkt im Browser (optimaler, aber nicht notwendig wäre ein Desktop-Programm) und vor allem gibt es bei den meisten nur die Möglichkeit, die Webseite direkt zu hosten, ohne dass der HTML-Code abrufbar ist (außer dann später, wenn die Webseite gehostet ist).

Meine Frage also: Kennt jemand einen Homepage-Baukasten, der direkt HTML-, CSS- und JavaScript-Code ausspuckt und einen nicht zwingt, die Seite direkt zu hosten, un der möglichst auf dem Desktop läuft?

Vielen Dank im Voraus und viele Grüße!

...zum Beitrag

JavaScript Kalender mit Eintragsfunktion

Hallo zusammen

Ich würde gerne in meine Website einen Kalender einbinden mit dem ich auf einen gewissen Tag klicken, dort dann einen Eintrag hinzufügen, speichern, betrachten und löschen kann. Dieser soll ausschliesslich dann sichtbar sein wenn man auf den Tag auf dem der Eintrag abgespeichert ist geklickt hat. Es sollte alles mit HTML, CSS und JavaScript programmiert sein. Da ich keine Ahnung von JavaScript bräuchte ich dringend Hilfe, kann mir hier jemand helfen?

mfg Keks

...zum Beitrag

Wie kann man eine HTML Suchfunktion erstellen?

Ich möchte eine Website mit HTML erstellen auf welcher man eine Suchfunktion hat. Ich probiere mein Anliegen so genau wie möglich zu erklären.

Erst einmal soll man ein Stichwort in die Suchleiste eingeben und dann drückt man auf ENTER oder "Suchen". Daraufhin wird dann eine Liste mit allen Beiträgen angezeigt in welchen Titeln dieses Wort drin vorkommt.

PS: Ich bin neu mit HTML und deshalb wäre es gut wenn es so einfach wie möglich erklärt wird. Ich weiß das man dafür JavaScript braucht!

...zum Beitrag

JavaScript - Formularfelder dynamisch hinzufügen?

Ich habe ein HTML-Formular. Darin soll man in eine Datenbank eine Frage mit x Antworten speichern kann. Habe folgendes als Vorlage benutzt, komme aber nicht weiter:

https://werner-zenk.de/javascript/formularfelder_dynamisch_hinzufuegen.php

Ich benötige aber neben einem Input-Feld für eine Antwort nur die Möglichkeit zur Definition, ob diese Antwort Richtig oder Falsch ist.

Habe jetzt folgendes Versucht... (Auszug für function feld_plus())

<script>
function feld_plus() {
 if (feld <= 9) {
  feld++;
 document.getElementById('dynamic_input').innerHTML = "";
  for (var counter = 1; counter <= feld; counter++) {
   var label = "Antwort " + counter;
   var inhalt = document.getElementById("antwort" + counter).value;
   document.getElementById('dynamic_input').innerHTML += "<label style=\"float: left;\">" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt + "' onInput='antwort(this.value, \"" + feld + "\")'></label><fieldset><input type='radio' id='true" + counter + "' name='statuscode' value='11'><label for='true" + counter + "'>Richtig</label> <input type='radio' id='false" + counter + "' name='statuscode' value='12'><label for='false" + counter + "'>Falsch</label></fieldset><br>";
  }
 }
}
function antwort(inhalt, feld) { document.getElementById("antwort" + feld).value = inhalt; } </script>
<a href="question_add.php"><button>Frage erstellen</button></a> <hr> <h2>Fragestellung</h2> <p>Nachfolgend die Frage eintragen...</p> <form id="question_add" action="question_action.php" method="POST" onsubmit="return confirm('Frage speichern?');"> <textarea form="question_add" name="questionText" wrap="soft" rows="2" placeholder="Wie lautet ...?" required></textarea><br> <hr> <h2>Antworten</h2> <p>Nachfolgend die Antwortmöglichkeiten angeben.</p> <p>Antworten hinzufügen <input type="button" value="-" onClick="feld_minus();"><input type="button" value="+" onClick="feld_plus();"></p>
<div id="dynamic_input"></div>
<!-- Antworten --> <input type="hidden" id="antwort1"> <input type="hidden" id="antwort2"> <input type="hidden" id="antwort3"> <input type="hidden" id="antwort4"> <input type="hidden" id="antwort5"> <input type="hidden" id="antwort6"> <input type="hidden" id="antwort7"> <input type="hidden" id="antwort8"> <input type="hidden" id="antwort9"> <input type="hidden" id="antwort10">

<hr>
<input type="submit" value="Frage speichern" >
</form>

...optisch passt dass... allerdings sind die Radio-Buttons buggy...

Definiere ist Antwort1 als richtig, und dann Antwort2 als falsch, so ist bei Antwort1 nicht mehr ausgewählt... als wenn das Fieldset nicht korrekt abgeschlossen wird.

Kennt sich damit jemand aus?

...zum Beitrag

Web Entwicklung Kurs noch aktuell oder nicht?

Ich habe so nen coolen Kurs für Web Entwicklung mit HTML, CSS, Javascript, jQuery, Bootstrap, PHP auf Udemy gesehen aber der ist von 2019.. haben sich die Dinge schon zu stark verändert in den letzten 4 Jahren oder kann man den noch machen?

Die komplette Web-Entwickler Masterclass | Udemy

...zum Beitrag

Wie kann ich einen Zufallsgenerator programmieren?

Ich möchte gerne ein Zufallsgeneraor erstellen, der durch Drücken eines Buttons einen zufälligen Text aus einer Liste auswählt und anzeigt.

...zum Beitrag

Website lädt automatisch neu?

Heute habe ich eine neue Website gemacht, es ist eine Todo Liste, einfach damit ich ein bisschen javascript üben kann. Soweit funktioniert auch alles doch sobald ich Sachen in den input eingebe und dann auf Hinzufügen drücke lädt die seite neu. Wieso?

Hier der js code

Und hier der HTML code

...zum Beitrag

Zufalls auswahl aus liste mit html und javascript?

Wie kann ich folgendenes machen?

Eine Liste mit Aufgaben und durch drücken auf ein Button wird dan eine Sache aus der Liste angezeigt.

...zum Beitrag

Mit Javascript zu einem Teil im HTML Dokument springen?

Hallo !

Ich bin gerade dabei eines meiner ersten Projekte mit JavaScript/CSS/HTML umzusetzen.

Ich bin gerade dabei eine Suchfunktion einzubauen.

Ich habe eine Layout von Material Design Lite verwendet. Ich habe es so umgesetzt, dass das ganze im einem HTML Formular steht und beim absenden (drücken der ENTER Taste) eine JavaScript Funktion ausgeführt wird. Bei dieser hole ich mir mithilfe von document.getElementById().value den Wert der eingegeben wurde und sage, dass dieser Wert auf eine Variable übertragen wird. Ich frage per If und else ab was eingeben wurde (Bsp. 1) und will dann das zum einem bestimmten Teil im HTML Text gesprungen wird.

Mein Problem :

Ich muss es irgendwie umsetzen, dass mit JavaScript Code zu einem bestimmten Teil (im HTML Text ) gesprungen wird OHNE das man auf einen Link klicken muss.

Weiß jemand von euch hier, wie das möglich ist ?

(Danke für deine Zeit, beim Lesen und Danke für jede Antwort)

Hier der Code meiner JavaScript Funktion

Hier der Code des HTML Formulars

...zum Beitrag

Warum gibt es nichts anderes als JavaScript im Browser Frontend?

Es gibt Dart-Flutter, C#-Blazor soweit ich weiß, aber ich nehme an, es ist nur JavaScript unter der Haube.

Ähnlich wie, wenn man React Native Code schreibt, wird es in die native mobile Sprache umgewandelt => Kotlin, Swift etc..

Weil soweit ich weiß, versteht der Browser nichts anderes als HTML, CSS und JavaScript.

Es gibt da nur die V8-Engine / andere JavaScript-Engines.

Aber warum?

Wieso ist es nicht theoretisch möglich, einfach mit einer neuen Sprache die für cross platform entwickelt wurde, einen onclick-Event Listener zu nutzen?

In einer ganz eigenen Engine.

Heißt nicht, das sie JavaScript irgendetwas die nächsten 5 Jahre streitig machen könnte, aber wenn diese Sprache direkt Typisierung unterstützen würde, ohne TypeScript und auch noch für andere Dinge besser geeignet wäre als JavaScript (wurde halt nicht dafür designed, ganz egal ob Electron, Native existiert) wie Desktopanwendungen, Mobil, etc..

PHP nehme ich erst garnicht auf, das macht alleine gar nichts im Frontend, ist eine Backendsprache und alleine sinnlos auf Websites, bis auf bisschen HTML generieren, das auch nur vom Server kommt.

Klar, wenn du ewig lange Weiterleitungen willst, die furchtbar sind und überhaupt nicht interaktive Websites, dich auf Formulare beschränkst, dann kriegst du das auch ohne JavaScript hin, etwas Schreckliches zu programmieren.

Mit WebAssembly kenne ich mich gar nicht aus. Ob da Event Listener, usw. möglich sind. Aber alleine von der Einstiegshürde und Komplexität die ich höre, ist das keine Alternative.

Assembly ist auch keine Alternative zu C++. Dafür gibt es Rust.

...zum Beitrag

Hilfe bei Vue.js Lernen?

Hallo zusammen,

Ich wollte euch fragen, ob mir jemand weiterhelfen kann.

Gerne möchte ich Vue.js lernen, jedoch weiss ich nicht, wo ich da anfangen soll. Kann mir jemand helfen, mit z. B. links zu gratis Kursen oder Videos welche einem etwas über Vue.js lernen? Falls, wenn da jemand ist, der sich sehr gut damit auskennt, möchte ich auch gerne fragen, was Vue.js überhaupt ist und wofür man dieses Framework gebrauchen kann.

Kurz zur Erklärung, ich habe den Auftrag bekommen, mit Vue.js zu arbeiten. Jedoch habe ich noch nie mit Vue.js gearbeitet und muss dies nun lernen. Ich habe bereits Kenntnisse in HTML, CSS, Bash-Scripting, PowerShell und JavaScript. Man muss auch dazu sagen, dass ich JavaScript noch nicht gut beherrsche.

...zum Beitrag

wie kann ich in javascript eine funktion ohne button auslösen?

Hallo,

ich bin noch Anfänger in javascript und wollte fragen wie ich eine Funktion in javascript auslöse nachdem meine HTML Seite geladen hat, ohne explizit einen button mit einer onclick zu schreiben der diese Funktion aufruft. Die Funktion kriegt ein Parameter im HTML Teil übergeben, was dann in etwa so aussieht:

<button id="drücken" onclick="Funktion({{result}})"></button>

ich kriege das nur durch diesen button im html teil hin.

<tbody id="Eintrag"></tbody>

der Parameter wird iteriert und in eine Tabelle gehängt

Javascript:

function Funktion(result){

for(var key in result)

key an Eintrag anhängen.

}

Das funktioniert auch alles gut, nur wird das alles nur ausgeführt wenn ich explizit auf den button drücke. verstehe auch nicht wie das sonst gehen würde. Ich kann ja nicht beispielsweise ein window.onload auf der javascript-Datei schreiben weil ich ja noch den result parameter in der HTML Datei übergeben muss.

Gibt es eventuell eine Möglichkeit innerhalb des HTML Datei dann sowas zu schreiben?:

window.onload = Funktion({{result}});

Bei mir kennt er dann nicht Funktion weil es auf der externen Javascript-Datei liegt.

...zum Beitrag

HTML Kalender ohne JavaScript oder PHP erstellen?

Hallo zusammen,

ich möchte mit HTML einen Kalender erstellen, der allerdings nicht statisch sein soll. Damit meine ich nicht unbedingt, dass jeder manuell auf der Webseite Daten eintragen kann, sondern dass man zwischen den Monaten navigieren kann. Zum Beispiel innerhalb einer Zeitspanne von August 2022 bis August 2025 oder so. Dabei soll der Kalender beim Aufrufen der Seite, wenn möglich, den aktuellen Monat zeigen und durch Klicken auf ein Symbol (oder eventuell Drücken der Links- / Rechtstaste auf der Tastatur) kann man auf den vorherigen oder nächsten Monat wechseln.

Ich möchte das - verständlicherweise - nicht durch das Erstellen von 37 verschiedenen HTML-Dokumenten erreichen, durch die man dann mit Hyperlinks zwischen diesen Seiten hin und herwechseln kann.

Das Problem ist, dass ich sowohl von JavaScript als auch von PHP absolut keine Ahnung habe und auf keinen Fall irgendwo im Internet einen fünfzig-Zeilen-Code (JavaScript, PHP oder sonst irgendeine Programmiersprache) kopieren will, den ich zu 99,9% selbst nicht verstehen würde.

Weiß einer, wie ich so etwas nur mit HTML und CSS (und eventuell, wenn es sein muss, auch mit Java) hinbekomme?

P. S. Bitte gebt mir keine Antworten vom Stil "lerne einfach JavaScript". Das ist keine hilfreiche Antwort, da ich es eben ohne JavaScript erreichen will!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen