How To Create A Client-Sided Search Bar Using Javascript

I’m trying to create a client-sided search bar using javascript and I’m not sure how to do that and get it to function properly. I’m trying to create one without using PHP since I have no experience with server-sided programming. How would you create one that works with the client-side? Do you need an index for the search results and an API as well? And how would you use an index and an API? The goal of the search bar is to find terms or words that are present on the webpage is what I’m trying to achieve with it. It’s to give the user a chance to search for the name of an article present in the webpage. Here is my current code if you want to see it: https://jsfiddle.net/snt87eg9/1/

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>



<div class="header">
<div id ="header">
<h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
</div></div><br>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
    <div id="Title">
      <a href="#"><h2>Article 1</h2></a>
      <h5>Date</h5>
      
      <p>Some text over there.,.. </p>
    </div>
    </div> 
    </div>
    </div>
    
  <div class="row">
  <div class="card">
  <div id="Title2">
    <a href="#"><h2>Article 2</h2></a>
    <h5>Date</h5>
    <p> Some text over here..... </p>

    </div>
    </div> 
    </div>
    ```
    

>Solution :

You need a way to select the searchbar, articles and article titles,
lets say you give classes article and article-title and give the searchbar id="searchbar"

Document should look like this:

<div class="topnav">
        <a class="active" href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <div class="search-container">
            <form action="/action_page.php">
                <input type="text" placeholder="Search.." name="search" id="searchbar">
                <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </div>



    <div class="header">
        <div id="header">
            <h2 style="text-indent: 1em; font-family: Helvetica; color: blue;">Articles</h2>
        </div>
    </div><br>


    <div class="row article">
        <div class="leftcolumn">
            <div class="card">
                <div id="Title">
                    <a href="#">
                        <h2 class="article-title">Article 1</h2>
                    </a>
                    <h5>Date</h5>

                    <p>Some text over there.,.. </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row article">
        <div class="card">
            <div id="Title2">
                <a href="#">
                    <h2 class="article-title">Article 2</h2>
                </a>
                <h5>Date</h5>
                <p> Some text over here..... </p>

            </div>
        </div>
    </div>

Here’s the way to filter out what you wrote in the searchbar:

<script>
       $('#searchbar').keyup(function(){
        let articles = $('.article'); //get all elements with class="article"
        let keyword = $(this).val().toLowerCase(); //get the content of the searchbar
        if(keyword == "") //show all elements if searchbar is empty
            articles.show();
        else{ //else loop through articles and check if the keyword is in the title div 
            articles.each(function(element) {
                let title = $(this).find('.article-title').text().toLowerCase();
                (title.indexOf(keyword) >= 0) ? $(this).show() : $(this).hide();
            });
        }
    });

    </script>

The script uses jQuery , you can put this before the script if you don’t have it already imported :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>