Html, Css, Javascript Search "Bar"(?) machen?

Ich würde gerne auf meiner Website einen Bereich haben wo ich ein Wort eintippen kann und mir dann Sätze usw. aufgelistet werden.

Beispiel: Ich gebe "Hund" ein und es wird auf der ganzen Seite nach dem Wort Hund gesucht und alles auf einer Seite aufgelistet.

Wie kann ich sowas machen? Bin Anfänger was das alles angeht...😅

1 Antwort

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache, Programmieren & Softwareentwicklung

05.10.2022, 10:41

Also für das Aussehen der Suchleiste kannst du ein passendes Input-Element verwenden:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

Das platzierst du in einem Form, zusammen mit einem Button zum absenden (da allerdings kein Submit-Button, sondern einen normalen Button).

Für diesen Button regestrierst du einen Click-Listener, der dann deine Suche übernimmt.

Dür die Suche kannst du folgendermaßen vorgehen: Du liest das aktuelle Dokument komplett ein und wendest darauf eine Such-Methode an (beispielsweise mittels RegEx), deren Ergebnisse du dann speicherst oder direkt ausgibst.

Ist insgesamt ein klein wenig kompliziert der Such-Teil, vielleicht willst du dattdessen zuvor etwas anderes ausprobieren, beispielsweise einen String in einem vorgefertogten text zu suchen oder soetwas.

Ähnliche Fragen

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.

...zur Frage

HTMX gut für Anfänger?

Ist es okay, erstmal HTMX und CSS, statt HTML, CSS und JavaScript für die Entwicklung einer Webseite zu nutzen, um erstmal das Prinzip von HTML und CSS zu verstehen? Ich habe nämlich nicht die ,,Kapazität", um jetzt auch noch JavaScript zu lernen, da ich mich gerade auf Java konzentriere.

...zur Frage

Projektideen für Programmier- Anfänger?

Hallo, ich absolviere für 4 Monate mein Praktikum im Bereich Informatik. In meiner Abteilung geht es um Websiteentwicklung und ich soll demnächst selbst eine Website programmieren (mit C#, JavaScript, HTML, Ajax und CSS).

Meine Frage ist, ob ihr so Ideen habt, was man als Anfänger (wirklich Anfänger mit 1% Grundkenntnis🥲) programmieren kann für 3 Monate ungefähr? Bin so 30 Stunden der Woche bei dem Unternehmen.

Eine weitere Frage ist, ob ihr gute Tutorials, Websites, YT- Videos, etc. zum Thema kennt? Ich soll nämlich selbst recherchieren und mir das selber beibringen.

Danke im Voraus für eure Antworten

...zur Frage

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zur Frage

Selfmade Fullstack lernen?

Hallo miteinander,

Ich hab angefangen über Codecademy mir das Programmieren (obwohl das Wort dafür etwas zu groß ist) auf HTML und CSS beigebracht.

Ich hab mich mit einer Softwareakademie in Verbindung gesetzt und bin auf die Schlussfolgerung gekommen, das jeder sich das auch von alleine beibringen kann.

Kann mir jemand alle Programme von A bis Z (also alles zum Programmieren, nicht nur die drei Elemente wie HTML CSS und Javascript) auflisten, die ein Software Entwickler drauf haben muss?

Wenn möglich dann bitte auch in der Reihenfolge in der man sie lernen sollte.

Und welche Programme bzw. Webseiten muss ich dafür nutzen, um alles zu lernen?

Ich möchte in den nächsten 2-3 Jahren neben meinem Beruf mir das alles beibringen, da ein Softwareentwickler sich nicht auf seine Qualifikationen auf dem Lebenslauf sondern eher auf sein eigenes Portfolio berufen muss bei Bewerbungsgesprächen.

Ich danke für die Antworten & die Hilfe im Voraus.

Da mir HTML und CSS zu lernen leicht fällt, denke ich das diese Richtung für mich richtig ist.

Liebe Grüße

...zur Frage

Web-Animation und Prozessvisualisierung?

Ich benötige Hilfe für ein Projekt, bei dem Zustände grafisch abgebildet werden sollen, siehe das Bild im Anhang. Es geht darum, dass wenn sich Zustände und Variablen in Javascript ändern, dies grafisch dargestellt werden soll.

Bis jetzt habe ich es so gemacht, dass es für alle möglichen Zustände ein Bild gibt. Das Problem ist, wenn das System expandiert, läuft das immer mehr aus dem Ruder, was die Erstellung der jeweiligen Zustände angeht. Das heißt, für jeden Zustand, muss ich 2^n Bilder erstellen.

Das Bild zeigt eine vereinfachte und minimalistische Darstellung, wie der Prozess abgebildet werden sollte. Dabei sollten dann, je nach Zustand, die jeweiligen Aktoren dargestellt werden.

Meine Frage ist, ob es einfachere oder elegantere Möglichkeiten gibt, dieses Prozessabbild für HTML mittels JS oder CSS zu animieren?

An SVG hatte ich auch schon gedacht, damit wird es aber noch viel komplizierter, wenn man damit noch nicht so viel Erfahrung hat.

...zur Frage

HTML Code direkt in Browser ausführen?

Also ich habe den Code für eine Webseite (HTML) und ich würde diesen Code gerne direkt in einem Browser ausführen, sodass er die Seite anzeigt.

Geht das, ohne dass man den Weg über eine html-Datei geht und die einfach öffnet?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

Css div Container weissen Rand los werden?

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zur Frage

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

...zur Frage

HTML/CSS relative Pfade mit / beginnen oder nicht?

Hallo,was ist der Unterschied zwischen :

<link rel="stylesheet" href="css/style.css">

und

<link rel="stylesheet" href="/css/style.css">

Wie binde ich binde ich denn Dateien ein, welche auf der selben Ebene liegen? Beginne ich mit / oder nicht?

...zur Frage

Navigation Bar in Html überdeckt zeilen-Wie kann ich das Beheben?

Hi Leute, Ich habe neulich eine navigation bar in Html css und javascript Programmiert. Jetzt habe ich aber das Problem, dass diese Navigation bar (Fixed on the top) Die ersten paar Zeilen, die ich schreibe überdeckt. Wenn ich in meinem

mit

die ersten paar Zeilen schreibe, werden diese von der Navigation bar überdeckt. Wenn ich aber einfach nur den Tag

schreibe, dann ist die navigation bar nicht mehr ganz oben sondern etwas nach unten verschoben. Das will ich auch nicht (: Was kann ich machen?

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen