Breaking News: Grepper is joining You.com. Read the official announcement!

live search javascript

Lazy Lobster answered on February 11, 2022 Popularity 9/10 Helpfulness 4/10

answer live search javascript

live search javascript

Comment

<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <h1>Live Search</h1>
        <input type="text" class="text-input" id="filter" placeholder="search" />
        <span id="filter-count"></span>
    </fieldset>
</form>

<nav>
    <ul class="liveSearchBar">
        <li><a href="#">Jim James</a></li>
        <li><a href="#">Hello Bye</a></li>
        <li><a href="#">Wassup Food</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Bleep bloop</a></li>
        <li><a href="#">jQuery HTML</a></li>
        <li><a href="#">CSS HTML AJAX</a></li>
        <li><a href="#">HTML5 Net Set</a></li>
        <li><a href="#">Node Easy</a></li>
        <li><a href="#">Listing Bloop</a></li>
        <li><a href="#">Contact HTML5</a></li>
        <li><a href="#">CSS3 Ajax</a></li>
        <li><a href="#">ET</a></li>
    </ul>
</nav>
.liveSearchBar, .liveSearchBar li{
  margin:0;
  padding:0;
  list-style:none;
}
.liveSearchBar, .liveSearchBar li a{
  color:#fff;
  text-decoration:none;
}
body{
  margin:0;
  background: #01B4FF;
  color:#fff;
  font-weight: 700;
  font-family: 'Brush Script MT', cursive;
  font-size: 20px;
}
#live-search fieldset{
  border:0;
  padding-left:0;
}
:focus{
  outline:none;
}
.text-input{
  height:30px;
  background: none;
  border:1px solid #fff;
  padding:5px ;
  font-family: 'Brush Script MT', cursive;
  font-size: 20px;
  color:#fff;
}
::-webkit-input-placeholder {
     color: #fff;
  }
  
  :-moz-placeholder { /* Firefox 18- */
     color: #fff;  
  }
  
  ::-moz-placeholder {  /* Firefox 19+ */
     color: #fff;  
  }
  
  :-ms-input-placeholder {  
     color: #fff;  
  }

$(document).ready(function(){
    $("#filter").keyup(function(){
 
        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;
 
        // Loop through the comment list
        $("nav ul li").each(function(){
 
            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
 
            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });
 
        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Filter = "+count);
    });
});

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: codepen.io

Tags: javascript live search

Link to this answer
Share Copy Link

Contributed on Feb 11 2022

Lazy Lobster

0 Answers Avg Quality 2/10

live search javascript

Contents

More Related Answers

live search javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.