Skip to content

Instantly share code, notes, and snippets.

@farmerbradllc
Last active December 24, 2016 02:47
Show Gist options
  • Save farmerbradllc/d5656a60d804e23c4fb13b22accd544e to your computer and use it in GitHub Desktop.
Save farmerbradllc/d5656a60d804e23c4fb13b22accd544e to your computer and use it in GitHub Desktop.
Search Files
<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>
// 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();
}
});
#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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment