Jquery Search Filter

List of Material Desing

Buttons style Try it

Radio Button Try it

Mac CSS Loader Try it

Digital_clock Try it

Notification Alert Glow Try it

Skeleton Screen Loading Try it

YouTube Video Play And pause Try it

Pure CSS Tooltip Try it

Box Hovering Effects Try it

Windows Loader Animation Try it

Multi level Navigation Menu Try it

Input Field Placeholder Effects Try it

Full Page Loader Try it

Card and Button Special Loader Try it

Basic Calculator Try it

Simple Box hovering Try it

Material Design Box Try it

Material Menu Icon Change to Back Button Try it

Long Press Event Using Pure Javascript Try it

Switch Button Using Pure CSS Try it

Main Page Loader Pure CSS Try it

Fun face Pure CSS Try it

Material card Animation Pure CSS Try it

vertical navigation design Try it

Responsive Animation Navigation Try it

Tabs - Material Design Try it

Accordion Collapsible Content Panels Try it

Vertical Tabs - Material Design Try it

Dropdown - Material Design Try it

Jquery Search Filter Try it

CSS Ellipsis Multiline Example Try it

Email Validation With Jquery Try it

Checking if an input is empty with JavaScript Try it

Number Validation In Javascript Try it

How to add calendar in html form using javascript Try it

Iphone Style Toggle Button CSS Try it

Bounce Animation Pure CSS Try it

Value Change Animation Jquery Try it

Material CheckBox Animation Try it

Material Success Icon animation css Try it

How TO - Hover Parent MouseOver child will show Animation Try it

How TO - TODO List Using Pure javascript Try it

How TO - Table Multi Checkbox Try it

How TO - Pure CSS Loading Circle Try it

How TO - Circular Progress Bar With Plain HTML and CSS Try it

How TO - CSS Animated Notification Icon And Badge Count HTML and CSS Try it

How TO - hover tick animation CSS3 Try it

CSS Buttons hover effects Try it

glow effects Try it

Skeleton Table Loading Try it

Important notification banner display Try it

Success message with ripple effects in material design Try it

Box with ripple effects in material design Try it

<!DOCTYPE html>
	<html>
	<head>
		<title>Page Title</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	</head>
	<style>
	
	body{
    background:#1ea089;
    padding:0px;
    margin:0px;
    font-family:'Open Sans', sans-serif;
  }
  .search_list{
      background: #fff;
      color: #000;
      border-radius: 0 0 4px 4px;
      -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
      box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
      margin:10px;
      border-radius:3px;
  }
  .search_list input {
      padding: 12px 35px 12px 11px;
      outline: 0;
      border: none;
      border-radius: 3px;
      z-index: 20;
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 12px;
  }
  h1{
      color:#fff;
      padding:10px;
      margin:0px;
      font-size:20px;
      font-weight:bold;
  }
  ul{
      list-style-type: none;
      padding:0px;
      margin:10px 0px;
      box-shadow:0px 3px 6px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.16);
      margin:10px;
    
  }
  ul li {
    background-color: #fff;
    width: 350px;
    padding:10px 16px;
    width:calc(100% - 32px);
    margin:3px 0px;
    border-radius: 3px;
  }
  ul li:last-child{
      margin:0px;
  }
	
	</style>
	<body>

<div class="search_list">
    <input type="text" id="get_val" name="search name" placeholder="Search List"/>
  </div> 
  <h1>Most Influencers Search IT</h1>
  <ul class="filter-search-list">
      <li>Bill Gates</li>
      <li>Guy Kawasaki</li>
      <li>Emma Watson</li>
      <li>Randi Zuckerberg</li>
      <li>Kylie Jenner</li>
      <li>Martha Stewart</li>
      <li>Ellen Degeneres</li>
      <li>Elon Musk</li>
      <li>Arnold Schwarzenegger</li>
      <li>Maisie Williams</li>
      <li>Stephen Hawking</li>
      <li>Michael Faraday</li>
      <li>Aristotle</li>
      <li>Nancy Pelosi</li>
      <li>Donald Trump</li>
      <li>Greta Thunberg</li>
      <li>Andres Manuel Lopez Obrador</li>
      <li>Alexandria Ocasio-Cortez</li>
      <li>Jacinda Ardern</li>
      <li>Juan Guaido</li>
      <li>Abiy Ahmed</li>
      <li>Mitch McConnell</li>
      <li>Brett Kavanaugh</li>
      <li>Jane Goodall</li>
      <li>Benjamin Netanyahu</li>
      <li>Zhang Yiming</li>
      <li>Hoesung Lee</li>
      <li>William Barr</li>
      <li>Pope Francis</li>
      <li>Xi Jinping</li>
      <li>Leana Wen</li>
      <li>Imran Khan</li>
      <li>Crown Prince Mohamed bin Zayed</li>
      <li>Cyril Ramaphosa</li>
      <li>Robert Mueller</li>
      <li>Mahathir Mohamad</li>
      <li>Matteo Salvini</li>
      <li>Jair Bolsonaro</li>
      <li>Zhang Kejian</li>
  </ul>
		
	</body>
	<script>
	
    $("#get_val").on("keyup", function(ev){
    var keyword = $(this).val();
    jquery_filter(keyword);
});

function jquery_filter(keyword) {
    var li_list = $("ul.filter-search-list li").css("display","none");
        li_list.filter(function(){
                         var item = $(this).text();
                         var key_d = new RegExp(keyword, "i");                         
                         return key_d.test(item);
                     }).closest("li").css("display","inline-block");
}
    		
	</script>
	</html>