Build a HTML5 Filterable Search List in Browser Using Vanilla Javascript Full Project For Beginners

 

 

 

index.html

 

 

<input type="text" placeholder="Search Users" id="filter_users"/>

<ul id="users-list">

</ul>
<style>
  #filter_users{
  width:100%;
  padding:10px;
}

#users-list{
  margin:0;
  padding:0;
}

#users-list li{
  list-style:none;
  padding:10px;
  margin:5px 0;
  border: 1px solid #e4e4e4;
}
  
</style>

<script>
  var users = [
  'Goku',
  'Naruto',
  'Ichigo',
  'Flash',
  'Batman',
  'Sherlock Holmes',
  'Khaleesi',
  'Steve Fox'
];

ul = document.getElementById("users-list");

var render_lists = function(lists){
  var li = "";
  for(index in lists){
    li += "<li>" + lists[index] + "</li>";
  }
  ul.innerHTML = li;
}

render_lists(users);

// lets filters it
input = document.getElementById('filter_users');

var filterUsers = function(event){
  keyword = input.value.toLowerCase();
  filtered_users = users.filter(function(user){
        user = user.toLowerCase();
       return user.indexOf(keyword) > -1; 
  });
  
  render_lists(filtered_users);
}

input.addEventListener('keyup', filterUsers);

</script>

Leave a Reply