DEV Community

Cover image for Search Bar Filter Using Vanilla Javascript
isurojit
isurojit

Posted on

Search Bar Filter Using Vanilla Javascript

We can achieve simple things like search products and filter them using simple vanilla javascript. jQuery, Ajax might make things simple, the same time it makes the app bulky. I have used only 40 lines of js code to achieve this.
I think nowadays rather than depending on libraries we should focus more on how to accomplish our task using vanilla javascript as much as we can.


Try this small project on - https://lnkd.in/diS5S2T


Code-
javaScript

//Defining Ui
const filter = document.querySelector('.searchBar');
const fruitList = document.querySelector('.collection');

//Load Event Listners
loadEventListners();

//Load all event listners  function
function loadEventListners(){
    //filter fruit
    filter.addEventListener('keyup', filterFruit);
    //search Bar cross malfunction
    filter.addEventListener("search", closeSearch);
}

//filter function
function filterFruit(e){
    //Accessing input data from input field
    const text = e.target.value.toLowerCase();

    document.querySelectorAll('.collection-item').forEach
    (function (fruit){
        const item = fruit.textContent;
        if(item.toLowerCase().indexOf(text) != -1){
            fruit.style.display = 'block';
        }else{
            fruit.style.display = 'none';
            noResult.style.display ='block';
        }
    });
}

//Search cross malfunction closeSearch
function closeSearch(e){
    document.location.reload();
}

//just for fun
const heading = document.querySelector('#heading');
heading.style.cssText= "font-family: 'Langar', cursive;";
Enter fullscreen mode Exit fullscreen mode

Html

<!-- boiler template -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit Search</title>
    <link rel="stylesheet" href="style.css">

<!-- google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">

<!-- fontawesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

</head>

<body>

<!-- heading -->
    <h1 id="heading">Fruit Search</h1>

<!-- Search Bar -->
    <input type="search" class="searchBar" name="Search" results="5" placeholder="Search">

<!-- Product Template -->
    <div>
        <ul class="collection">
<!-- apple -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Apple">
                    <img src="https://isurojit.github.io/fruitsearch/img/apple.png" alt="apple">
                </a>
                <h1>Apple</h1>
            </li>

<!-- orange -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Orange_(fruit)">
                    <img src="https://isurojit.github.io/fruitsearch/img/orange.jpg" alt="orange">
                </a>
                <h1>Orange</h1>
            </li>

<!-- mango -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Mango">
                    <img src="https://isurojit.github.io/fruitsearch/img/mango.jpeg" alt="mango">
                </a>
                <h1>Mango</h1>
            </li>

<!-- banana -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Banana">
                    <img src="https://isurojit.github.io/fruitsearch/img/banana.jpg" alt="banana">
                </a>
                <h1>Banana</h1>
            </li>

<!-- pomegranate -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pomegranate">
                    <img src="https://isurojit.github.io/fruitsearch/img/pomegranate.png" alt="pomegranate">
                </a>
                <h1>Pomegranate</h1>
            </li>

<!-- pitaya -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pitaya">
                    <img src="https://isurojit.github.io/fruitsearch/img/dragonfruit.jpg" alt="pitaya">
                </a>
                <h1>Pitaya</h1>
            </li>

<!-- kiwi -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Kiwifruit">
                    <img src="https://isurojit.github.io/fruitsearch/img/kiwi.png" alt="kiwi">
                </a>
                <h1>Kiwi</h1>
            </li>

<!-- papaya -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Papaya">
                    <img src="https://isurojit.github.io/fruitsearch/img/papaya.jpg" alt="papaya">
                </a>
                <h1>Papaya</h1>
            </li>

<!-- strawberry -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Strawberry">
                    <img src="https://isurojit.github.io/fruitsearch/img/strawberry.jpg" alt="strawberry">
                </a>
                <h1>Strawberry</h1>
            </li>

<!-- watermelon -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Watermelon">
                    <img src="https://isurojit.github.io/fruitsearch/img/watermellon.jpg" alt="watermellon">
                </a>
                <h1>Watermelon</h1>
            </li>

<!-- pear -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Pear">
                    <img src="https://isurojit.github.io/fruitsearch/img/pears.png" alt="pear">
                </a>
                <h1>Pear</h1>
            </li>

<!-- cherry -->
            <li class="collection-item">
                <a href="https://en.wikipedia.org/wiki/Cherry">
                    <img src="https://isurojit.github.io/fruitsearch/img/cherry.jpg" alt="cherry">
                </a>
                <h1>Cherry</h1>
            </li>

 <!-- end of products -->           
        </ul>
<!-- end of list -->
    </div>
<!-- end of product template -->

  <footer>

        <h4>Made With <i class="fas fa-heart"></i> by <a href="https://www.linkedin.com/in/surojit-manna">isuro</a></h4>

  </footer>

    <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Css

body{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.collection-item:hover{
    transform: scale(.9);
    transition: all .5s ease-in-out;
    cursor: pointer;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    img{
        width: 90%;
    }
    .collection{
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
    }
    .collection-item{
        list-style: none;
        flex: 0 0 24.3333%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 15%;
        padding: 2%;
        margin: 2% 2%;
    }
    h1{
        text-align: center;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 1% 12%;
        font-size: 3rem;
    }

}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .collection-item{
        list-style: none;
        flex: 0 0 95%;
    }
    img{
        width: 100%;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 2% 10%;
        font-size: 3rem;
    }
    h1{
        text-align: center;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 900px) and (min-width: 600px){
    .collection-item{
        list-style: none;
        flex: 0 0 45%;
    }
    img{
        width: 100%;
    }
    input{
        width: 75%;
        border: 1px solid #fff1f0;
        -webkit-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        -moz-box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        box-shadow: -2px 5px 42px -10px rgba(0,0,0,0.75);
        border-radius: 40px;
        padding: 1.5%;
        outline:none;
        margin: 2% 10%;
        font-size: 3rem;
    }
    h1{
        text-align: center;
    }
}

/* Scroll bar */

  /* width */
  ::-webkit-scrollbar {
    width: 20px;
  }

  /* Track */

    ::-webkit-scrollbar-track {
    background: rgb(255, 0, 0); 
  }

  /* Handle */

    ::-webkit-scrollbar-thumb {
    background: rgb(38, 0, 255); 
    border-radius: 50px;
  }


  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgb(0, 255, 42); 
  } 
  footer{
      text-align: center;
  }
Enter fullscreen mode Exit fullscreen mode

[ps:- didn't work on CSS. so kept it messy.]

Any suggestions welcome.

Top comments (2)

Collapse
 
vier31 profile image
Jan Schröder

Would be nice if you posted the code here. Keep everything in one place.

Collapse
 
isurojit profile image
isurojit

Sure. :)