How to create search input ?

Here it's the demo. to see the code,

click here.

HTML :

<!--
How to use:

1) Add [data-search] to search input
2) Add [data-filter-item] to the items that should be filtered
3) Add [data-filter-name="SEARCH TERM"] to the filter-items

-->

<div class="search">
<input type="text" placeholder= "search" data-search/>
</div>
<div class="items" >

<div data-filter-item data-filter-name="html">html</div>
<div data-filter-item data-filter-name="css">css</div>
<div data-filter-item data-filter-name="javascript">js</div>
<div data-filter-item data-filter-name="php">php</div>
<div data-filter-item data-filter-name="jquery">jquery</div>

</div>

CSS :

.search {
margin-bottom: 30px;
}

[data-filter-item] {
padding: 15px;
background-color: #ccc;
border: 1px solid #fff;
}

.hidden {
display: none;
}

JS :

$('[data-search]').on('keyup', function() {

var searchVal = $(this).val();
var filterItems = $('[data-filter-item]');
if (searchVal != '') {

filterItems.addClass('hidden');
$('[data-filter-item][data-filter-name*="' +searchVal.toLowerCase()+ '"]').removeClass('hidden');

} else {
filterItems.removeClass('hidden');
}

});