Search Files

index.html

<div class="search">
  <input id="searchInput" type="text" class="form-control input-md" maxlength="64" placeholder="Search by name, title, email or phone">
  <button type="submit" class="btn btn-primary btn-sm">Search</button>
</div>

search.js

	// makes contains case insensitive 
	$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    		return function( elem ) {
        		return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    		};
	});
	
	$("input[type='text']").on("change", function() {
		var searchValue = $('#searchInput').val();
	
		if(searchValue == ""){
			$('.item').show();
		}else{
  			$('.item:not(:contains('+ searchValue +'))').hide(); 
  		}
	});
	$("input[type='text']").on("input", function() {
		var searchValue = $('#searchInput').val();
		if(searchValue == ""){
			$('.item').show();
		}
	});

style.css

#search {
    float: right;
    margin-top: 9px;
    
}

.search {
    padding: 5px 0;
  width: 90%;
    height: 30px;
    position: relative;
    left: 10px;
    float: left;
    line-height: 22px;
}

    .search input {
        height: 30px;
        line-height: 18px;
        padding: 0 2px 0 2px;
        border-radius:1px;
    }
.btn {
    height: 30px;
    position: absolute;
    right: 0;
    top: 5px;
    border-radius:1px;
}

.btn:focus,
.btn:active {
outline-width: 0;
position: absolute;
top: 6px;
}