Pure Javascript Search Functionality

by css3transitionJune 16, 2020September 23, 2020

Hi all, here I am with a search bar using this you can search the content of their concern. A basic search bar we can make by using Html, CSS & Javascript only. There are many advance search functionality that uses algorithm base search to show up results. But the search function that we are going to make will filter substrings in the string.

Lets code this Searchbox functionality.

HTML Code:

In this html we remind one thing we must have different data string for each recurrence so that when we search item it can differentitate for visible output.

HTML

XHTML

<div class="container">
  <div class="search-box">
    <input placeholder="Type to Search..." id="search-users" class="search-users" type="text" >
    <button class="search-box-action">Search</button>
  </div>
  <div class="users-container">
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-1.svg" alt="Rahul"/> </div>
      <div class="user-data"><h2>Rahul Yadav</h2><a href="#">(email1@example.com)</a>
      <div class="user-designation">Angular Developer</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-2.svg" alt="nelson mandela"/></div>
      <div class="user-data"><h2>Nelson Mandela</h2><a href="#">(nelsonmandela@example.com)</a>
        <div class="user-designation">Social Activist</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-3.svg" alt="barack obama"/> </div>
      <div class="user-data"><h2>Barack Obama</h2><a href="#">(barackobama@example.com)</a>
        <div class="user-designation">Politician</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-4.svg" alt="Kalpana Chawala"/> </div>
      <div class="user-data"><h2>Kalpana Chawala</h2><a href="#">(kalpana@example.com)</a>
        <div class="user-designation">Astronaut</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-3.svg" alt="Narendra Modi"/> </div>
      <div class="user-data"><h2>Narendra Modi</h2><a href="#">(modi@example.com)</a>
        <div class="user-designation">Prime Minister Of India</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-1.svg" alt="Mark Jukerburg"/> </div>
      <div class="user-data"><h2>Mark Jukerburg</h2><a href="#">(mark@example.com)</a>
        <div class="user-designation">Facebook CEO</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-2.svg" alt="Mukesh Ambani"/> </div>
      <div class="user-data"><h2>Mukesh Ambani</h2><a href="#">(mukesh@example.com)</a>
        <div class="user-designation">Reliance Owner</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>
    <div class="user">
      <div class="user-img"><img src="http://css3transition.com/demo/toggle-side-menu/stylesheet/images/person-3.svg" alt="K srivan"/> </div>
      <div class="user-data"><h2>K srivan</h2><a href="#">(srivan@example.com)</a>
        <div class="user-designation">ISRO President</div>
      </div>
      <div class="user-controls">
        <a class="add" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
        <a class="delete" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>
        <a class="update" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>
      </div>
    </div>

  </div>
</div>

<button class="search-box-action">Search</button>

</div>

<div class="user-data"><h2>Rahul Yadav</h2><a href="#">(email1@example.com)</a>

<div class="user-designation">Angular Developer</div>

</div>

</div>

<div class="user-data"><h2>Nelson Mandela</h2><a href="#">(nelsonmandela@example.com)</a>

<div class="user-designation">Social Activist</div>

</div>

</div>

<div class="user-data"><h2>Barack Obama</h2><a href="#">(barackobama@example.com)</a>

<div class="user-designation">Politician</div>

</div>

</div>

<div class="user-data"><h2>Kalpana Chawala</h2><a href="#">(kalpana@example.com)</a>

<div class="user-designation">Astronaut</div>

</div>

</div>

<div class="user-data"><h2>Narendra Modi</h2><a href="#">(modi@example.com)</a>

<div class="user-designation">Prime Minister Of India</div>

</div>

</div>

<div class="user-data"><h2>Mark Jukerburg</h2><a href="#">(mark@example.com)</a>

<div class="user-designation">Facebook CEO</div>

</div>

</div>

<div class="user-data"><h2>Mukesh Ambani</h2><a href="#">(mukesh@example.com)</a>

<div class="user-designation">Reliance Owner</div>

</div>

</div>

<div class="user-data"><h2>K srivan</h2><a href="#">(srivan@example.com)</a>

<div class="user-designation">ISRO President</div>

</div>

</div>

CSS Code:

Going to make this layout beautiful as be know beauty is best.

CSS

html{
  padding: 0;
  margin: 0;
  height: 100%;
  background-image: linear-gradient(to right bottom, #4800fa, #4800fb, #4900fc, #4900fd, #4900fe, #5200fc, #5900fa, #6000f8, #6d00f3, #7800ee, #8100e9, #8900e4);
  background-origin: border-box;
  background-position: top left;
  background-repeat: no-repeat;
  position: fixed;
  width: 100%;
}
body {
  margin: 0;
  font-family: sans-serif;
  cursor: default;
}
.container {
  width: 1280px;
  margin: 10vh auto 0;

}
.search-box{
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 30px;
}
.search-users{
  width: 500px;
  max-width: 100%;
  border: none;
  background: #ffffff;
  height: 50px;
  border-radius: 40px;
  box-shadow: 5px 10px 10px rgba(0,0,0,0.1);
  padding: 5px 15px;
  box-sizing: border-box;
}
.search-users:focus{
  border: none;
  outline: none;
}

.search-box-action{
  width: 90px;
  background-image: linear-gradient(to right, #5200ff, #5c00ff, #6500ff, #6d00ff, #7500ff, #7a00fd, #7e00fa, #8200f8, #8400f3, #8700ee, #8800ea, #8a00e5);
  height: 34px;
  border-radius: 30px;
  position: absolute;
  right: 10px;
  top: 8px;
  border: none;
  font-size: 12px;
  color: #fff;
  box-sizing: border-box;
}

.users-container {
  width: 1280px;
  margin: 0 auto;
  overflow: auto;
  height: calc(100vh - 70px);
}
.user{
  width: calc(25% - 24px);
  min-width: 240px;
  margin: 12px;
  float: left;
  background: linear-gradient(to right bottom, #9c05ff, #9a07fb, #9909f6, #970bf2, #950dee, #900ceb, #8c0ce9, #870be6, #7e08e5, #7606e3, #6c05e2, #6204e0);
  border-radius: 15px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
  padding: 15px;
  box-sizing: border-box;
  transition: all 0.5s ease;
}
.user:hover{
  box-shadow: 4px 10px 10px rgba(0,0,0,0.2);
  background: linear-gradient(to left top, #9c05ff, #9a07fb, #9909f6, #970bf2, #950dee, #900ceb, #8c0ce9, #870be6, #7e08e5, #7606e3, #6c05e2, #6204e0);
  transition: all 0.5s ease;
}
.user-img{
  height: 80px;
  width: 80px;
  margin: 0 auto 15px;
}
.user-img img{
  height: 80px;
  width: 80px;
  border-radius: 50px;
}
.user-data h2{
  font-size: 15px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.user-data a{
  text-decoration: none;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 5px;
  display: block;
  opacity: 0.7;
}
.user-data .user-designation{
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  border: none;
  margin: 10px 0px;
  color: #ff8fce;
  letter-spacing: 2px;
  background: rgba(0,0,0,0.1);
  border-radius: 30px;
}
.user-controls{
  text-align: center;
}
.user-controls a{
  text-align: center;
  display: inline-block;
  width: 36px;
  height: 15px;
  border-right: 1px solid #eac6f1;
  box-sizing: border-box;
  margin-left: -5px;
  padding: 0;
  margin-top: 5px;
}
.user-controls a:last-child{
  border-right: none;
}
.user-controls a svg{
  width: 20px;
  height: 20px;
  margin-top: -3px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

html{

padding: 0;

margin: 0;

height: 100%;

background-image: linear-gradient(to right bottom, #4800fa, #4800fb, #4900fc, #4900fd, #4900fe, #5200fc, #5900fa, #6000f8, #6d00f3, #7800ee, #8100e9, #8900e4);

background-origin: border-box;

background-position: top left;

background-repeat: no-repeat;

position: fixed;

width: 100%;

}

body {

margin: 0;

font-family: sans-serif;

cursor: default;

}

.container {

width: 1280px;

margin: 10vh auto 0;

}

.search-box{

width: 500px;

max-width: 100%;

margin: 0 auto;

position: relative;

margin-bottom: 30px;

}

.search-users{

width: 500px;

max-width: 100%;

border: none;

background: #ffffff;

height: 50px;

border-radius: 40px;

box-shadow: 5px 10px 10px rgba(0,0,0,0.1);

padding: 5px 15px;

box-sizing: border-box;

}

.search-users:focus{

border: none;

outline: none;

}

.search-box-action{

width: 90px;

background-image: linear-gradient(to right, #5200ff, #5c00ff, #6500ff, #6d00ff, #7500ff, #7a00fd, #7e00fa, #8200f8, #8400f3, #8700ee, #8800ea, #8a00e5);

height: 34px;

border-radius: 30px;

position: absolute;

right: 10px;

top: 8px;

border: none;

font-size: 12px;

color: #fff;

box-sizing: border-box;

}

.users-container {

width: 1280px;

margin: 0 auto;

overflow: auto;

height: calc(100vh - 70px);

}

.user{

width: calc(25% - 24px);

min-width: 240px;

margin: 12px;

float: left;

background: linear-gradient(to right bottom, #9c05ff, #9a07fb, #9909f6, #970bf2, #950dee, #900ceb, #8c0ce9, #870be6, #7e08e5, #7606e3, #6c05e2, #6204e0);

border-radius: 15px;

box-shadow: 0px 5px 10px rgba(0,0,0,0.1);

padding: 15px;

box-sizing: border-box;

transition: all 0.5s ease;

}

.user:hover{

box-shadow: 4px 10px 10px rgba(0,0,0,0.2);

background: linear-gradient(to left top, #9c05ff, #9a07fb, #9909f6, #970bf2, #950dee, #900ceb, #8c0ce9, #870be6, #7e08e5, #7606e3, #6c05e2, #6204e0);

transition: all 0.5s ease;

}

.user-img{

height: 80px;

width: 80px;

margin: 0 auto 15px;

}

.user-img img{

height: 80px;

width: 80px;

border-radius: 50px;

}

.user-data h2{

font-size: 15px;

color: #ffffff;

text-align: center;

letter-spacing: 1px;

margin-bottom: 5px;

}

.user-data a{

text-decoration: none;

font-size: 12px;

color: #ffffff;

text-align: center;

letter-spacing: 1px;

margin-bottom: 5px;

display: block;

opacity: 0.7;

}

.user-data .user-designation{

display: block;

text-align: center;

padding: 12px;

font-size: 12px;

border: none;

margin: 10px 0px;

color: #ff8fce;

letter-spacing: 2px;

background: rgba(0,0,0,0.1);

border-radius: 30px;

}

.user-controls{

text-align: center;

}

.user-controls a{

text-align: center;

display: inline-block;

width: 36px;

height: 15px;

border-right: 1px solid #eac6f1;

box-sizing: border-box;

margin-left: -5px;

padding: 0;

margin-top: 5px;

}

.user-controls a:last-child{

border-right: none;

}

.user-controls a svg{

width: 20px;

height: 20px;

margin-top: -3px;

}

Javascript code:

When we give this search bar any input on keypress id=”search-users” called, in this way our javascript code works on every keypress. First of all we get input using querySelector for input field ID and make sure you convert it in lowercase to avoid case sensivity while searching. A arrary of data stored in userData. This contains everylist that has class “user”. After this loops runs to check if innerHTML of every document includes the input substring if it does not, display set to none so that it can be hidden from front end.

JavaScript

var searchUsers = document.querySelector('#search-users'),
    users = document.querySelectorAll('.user'),
    usersData = document.querySelectorAll('.user-data'),
    searchVal;

searchUsers.addEventListener('keydown', function() {
  searchVal = this.value.toLowerCase();

  for (var i = 0; i < users.length; i++) {
    if (!searchVal || usersData[i].textContent.toLowerCase().indexOf(searchVal) > -1) {
      users[i].style['display'] = 'inline-block';
    }
    else {
      users[i].style['display'] = 'none';
    }
  }
});