Simple jQuery Search Filter

index.html

<div class="container">
	<div class="search">
		<input type="text" placeholder="search" data-search />
	</div>
	<div class="items">
		<div data-filter-item data-filter-name="apple">Apple</div>
		<div data-filter-item data-filter-name="google">Google</div>
		<div data-filter-item data-filter-name="microsoft">Microsoft</div>
		<div data-filter-item data-filter-name="hp">HP</div>
		<div data-filter-item data-filter-name="dell">Dell</div>
		<div data-filter-item data-filter-name="samsung">Samsung</div>
	</div>
</div>

script.js

/*

	How to use:
	1)	Copy this jQuery to your project
	2)	Add [data-search] to search input
	3)	Add [data-filter-item] to the items that should be filtered
	4)	Add [data-filter-name="SEARCH TERM"] to the filter-items

*/

$('[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');
	}
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

simple-jquery-search-filter.markdown

Simple jQuery Search Filter

The most simple jQuery search filter you'll probably find. Ready to be used in your project in 1 minute.

A Pen by Alexander Erlandsson on CodePen.

License.

style.less

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
}

.search {
	margin-bottom: 30px;
}

.items {
	
}

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

.hidden {
	display: none;
}