search

raw js

by Oleh Kotsubko

HTML

<input type="text" id="input" class="search-input" placeholder="Type something">
<ul class="search-list">
  <li class="header search-list-item">A</li>
  <li class="search-list-item">Alex</li>
  <li class="search-list-item">Alala</li>
  <li class="header search-list-item">B</li>
  <li class="search-list-item">Bill</li>
  <li class="search-list-item">Boris The Blade</li>
  <li class="header search-list-item">C</li>
  <li class="search-list-item">Clivland Brown</li>
</ul>

CSS

.search-input {
  border: 1px solid #fefefe;
  height: 36px;
  padding: 0 10px;
  width: 350px;
  margin-bottom: 15px;
}
.search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #f0f0f0;
  max-width:370px;
}

.search-list-item {
  padding: 5px;
  background: #fff;
}

.search-list-item.header {
  background: orange;
}

JavaScript

let input = document.querySelector(".search-input");
  input.addEventListener("input", function(){
    let thisValue = this.value.toLowerCase(),
        searchList = document.querySelector(".search-list"),
        searchListItems = searchList.querySelectorAll(".search-list-item");
        
        for(let i in searchListItems) {
        
        	let item = searchListItems[i];
        	if( item.innerHTML.toLowerCase().indexOf(thisValue) > -1 ) {
          	item.removeAttribute("style");
          } else {
            item.style.display = "none";
          }
        }
}, false);