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

FAQs mit Suchfunktion

bzwerg

Neues Mitglied
Hallo,

ich möchte gern eine HTML Seite erstellen in der man sich FAQs durchlesen kann. Es soll aber so sein, dass der Besucher zu Beginn zentral nur eine Suchleiste sieht (ähnlich Google.de) und mit Eingabe eines Schlagwortes (z.B. Passwort) werden ihm auf der selben Seite alle FAQs angezeigt, die den Begriff Passwort beinhalten (z.B. Passwort vergessen? Wie setzten Sie Ihr Passwort zurück.) + Antwort.

Mein Gedanke ist, dass alle FAQs bereit liegen, aber noch nicht sichtbar sind. Nur durch die Suche werden die einzelnen Fragen+Antworten angezeigt.

Wie gesagt, alles soll auf einer Seite passieren. Bitte kein Absprung auf Unterseiten.

Vielen Dank
 

m.scatello

Senior HTML'ler
Jetzt wissen wir, was du möchtest. Wenn wir jetzt noch wissen würden, wie deine Frage lautet und was du bisher versucht hast, kommen wir vielleicht auch weiter.
 

bzwerg

Neues Mitglied
Jetzt wissen wir, was du möchtest. Wenn wir jetzt noch wissen würden, wie deine Frage lautet und was du bisher versucht hast, kommen wir vielleicht auch weiter.
Ich hoffe ihr könnt mir einen Lösungsweg vorschlagen oder einen Tipp geben, wie ihr es angehen würdet. Bisher habe ich noch nicht mit Suchfunktionen gearbeitet.
 

m.scatello

Senior HTML'ler
Lege eine Datenbank an, in die du deine Daten speicherst. Mit Hilfe von PHP wertest du dann dein Formular aus und sucht die eingegebenen Begriffe in der Datenbank. Eigentlich nichts besonderes, bekommt man mit Grundlagen wissen hin
 

Sempervivum

Senior HTML'ler
Vor einiger Zeit hatte jemand die gleiche Frage und ich hatte dies entwickelt:
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Testing a search bar</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
    <link href="css/woff2.css" rel="stylesheet" type="text/css" />
    <link href="css/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container" data-view="search">
        <div class="row">
            <div class="col-md-10 col-sm-9">
                <section id="search">
                    <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search FAQ</span></label>
                    <input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
                </section>
            </div>
        </div>

        <div id="faqs">
            <h3>Question 1</h3>
            <section>
                Answer 1<br> abc
            </section>
            <h3>Question 2</h3>
            <section>
                Answer 2<br>xyz
            </section>
            <h3>Question 3</h3>
            <section>
                Answer 3<br>def
            </section>
        </div>
    </div>
    <script>
        $("#faqs h3, #faqs section").addClass("match");
        $("#searchinput").on("input", function () {
            var vl = $(this).val();
            $("#faqs *").removeClass("match");
            $("#faqs").find("*").each(function (idx, el) {
                ele = $(el);
                if (ele.text().indexOf(vl) != -1) {
                    ele.addClass("match");
                    if (ele.prop("tagName") == "H3") {
                        ele.next("section").addClass("match");
                    } else {
                        ele.prev("h3").addClass("match");
                    }
                }
            });
        });
    </script>
</body>
</html>
Prüfe, ob Du damit etwas anfangen kannst.
 

Sempervivum

Senior HTML'ler
Bei mir funktionierte es, aber ... wenn ich die CSS-Einzüge deaktiviere, nicht mehr. Ich untersuche es, kann nur eine Kleinigkeit sein ...

Edit: Klar, das Sichtbar- und Unsichtbarmachen wird durch das CSS gesteuert. Dies sollte jetzt funktionieren:
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Testing a search bar</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
    <style>
        #faqs h3, #faqs section {
            display: none;
        }
        #faqs h3.match, #faqs section.match {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container" data-view="search">
        <div class="row">
            <div class="col-md-10 col-sm-9">
                <section id="search">
                    <label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search FAQ</span></label>
                    <input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1">
                </section>
            </div>
        </div>

        <div id="faqs">
            <h3>Question 1</h3>
            <section>
                Answer 1<br> abc
            </section>
            <h3>Question 2</h3>
            <section>
                Answer 2<br>xyz
            </section>
            <h3>Question 3</h3>
            <section>
                Answer 3<br>def
            </section>
        </div>
    </div>
    <script>
        $("#faqs h3, #faqs section").addClass("match");
        $("#searchinput").on("input", function () {
            var vl = $(this).val();
            $("#faqs *").removeClass("match");
            $("#faqs").find("*").each(function (idx, el) {
                ele = $(el);
                if (ele.text().indexOf(vl) != -1) {
                    ele.addClass("match");
                    if (ele.prop("tagName") == "H3") {
                        ele.next("section").addClass("match");
                    } else {
                        ele.prev("h3").addClass("match");
                    }
                }
            });
        });
    </script>
</body>
</html>
 
Zuletzt bearbeitet:

m.scatello

Senior HTML'ler
Und so einfach wäre es, wenn du das vernünftigerweise über eine Datenbank machen würdest:
PHP:
<?php
   $output = array();
  
   if (isset($_POST['searchTerms']))
   {         
       $terms = explode (" ", $_POST['searchTerms']);
      
       if (count($terms))
       {
          $link = mysqli_connect("localhost", "user", "password", "database");

          if (mysqli_connect_errno())
            die("Connect failed: " . mysqli_connect_error());

          for ($i = 0; $i < count($terms); $i++)
             $terms[$i] = "`data` like '%" .  mysqli_real_escape_string($link, $terms[$i]) . "%'";
          
          $query = "Select `data` from `table` where " . implode(" or ", $terms);
          
          $result = mysqli_query($link, $query)
            or die ("MySQL-Error: " . mysqli_error($link));
        
          while ($data = mysqli_fetch_assoc($result))
             $output[] = "<p>" . $data['data'] . "</p>";
      }
   }
?>
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>FAQ</title>
  </head>
  <body>
    <form action="" method="post">
      Suchbegriffe: <input type="text" name="searchTerms"><br>
      <input type="submit" name="submit" value="Suchen">
    </form>
<?php
   if (count($output))
     echo implode("<br>\n", $output);
?>
  </body>
</html>
 
Werbung:

Neueste Beiträge

Oben