How To Create A Client-Sided Search Bar Using Javascript-CodePudding

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>
    ```

CodePudding user response：

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 
        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>

CodePudding user response：

I just took the time to make a client-side search javascript function. But if you are not too familiar with javascript try to learn a little bit more before implementing this type of things.

$(document).ready(function() {
  $("#header").hide().fadeIn(2000);
});

$(document).ready(function() {
  $("#title").hide().fadeIn(2000);
});

$(document).ready(function() {
  $("#footer").hide().fadeIn(2000);
});

function searchInArticles(word) {
  const articles = document.querySelectorAll(".card");

  articles.forEach(article => {
    if (article.innerHTML.includes(word)) {
      article.style.display = "block";
      article.scrollIntoView();
    } else {
      article.style.display = "none";
    }
  })
}

searchInArticles("Yes");
//searchInArticles("Some");

/* Add a gray background color with some padding */

body {
  font-family: Arial;
  padding: 20px;
  background: #32cd32;
}


/* Header/Blog Title */

.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: #7df9ff;
}


/* Create two unequal columns that floats next to each other */


/* Left column */

.leftcolumn {
  float: left;
  width: 100%;
}


/* Add a card effect for articles */

.card {
  background-color: #87ceeb;
  padding: 20px;
  margin-top: 20px;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Footer */

.footer {
  padding: 20px;
  text-align: center;
  background: #00bfff;
  margin-top: 20px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}


/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a,
  .topnav input[type=text],
  .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

  <!-- <a href="/path/to/file">My link</a> -->

  <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>Yes 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>

  <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>

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

      </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>

  <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>

  <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>

  <div class="footer">
    <div id="footer">

    </div>
  </div>

</body>

</html>