"jQuery Searchable Plugin"
Bootstrap 3.1.0 Snippet by stidges

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1>jQuery Searchable Plugin</h1> </div> <p>You can find the source of this plugin at <a href="http://github.com/stidges/jquery-searchable" target="_blank">Github</a> (http://github.com/stidges/jquery-searchable)!</p> </div> </div> <div class="row"> <div class="col-lg-12"> <h3>Table / Fuzzy search example</h3> </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> <input type="search" id="search" value="" class="form-control" placeholder="Search using Fuzzy searching"> </div> </div> <div class="row"> <div class="col-lg-12"> <table class="table" id="table"> <thead> <tr> <th>First column</th> <th>Second column</th> <th>Third column</th> </tr> </thead> <tbody> <tr> <td>Introducing</td> <td>jQuery</td> <td>Searchable</td> </tr> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Some</td> <td>More</td> <td>Data</td> </tr> </tbody> </table> <hr> </div> </div> <div class="row"> <div class="col-lg-12"> <h3>Non-table example</h3> </div> </div> <div class="row"> <div class="col-lg-4 col-lg-offset-4"> <input type="search" id="container-search" value="" class="form-control" placeholder="Search..."> </div> </div> </div> <div class="container" id="searchable-container"> <div class="row row-padding"> <div class="col-xs-4">Col 1</div> <div class="col-xs-4">Col 2</div> <div class="col-xs-4">Col 3</div> </div> <div class="row row-padding"> <div class="col-xs-4">Another row</div> <div class="col-xs-4">With some</div> <div class="col-xs-4">Other data</div> </div> <div class="row row-padding"> <div class="col-xs-4">Lorem</div> <div class="col-xs-4">Ipsum</div> <div class="col-xs-4">Dolor</div> </div> <div class="row row-padding"> <div class="col-xs-4">Foo</div> <div class="col-xs-4">Bar</div> <div class="col-xs-4">Baz</div> </div> </div> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>
.row-padding { margin-top: 25px; margin-bottom: 25px; }
$(function () { $( '#table' ).searchable({ striped: true, oddRow: { 'background-color': '#f5f5f5' }, evenRow: { 'background-color': '#fff' }, searchType: 'fuzzy' }); $( '#searchable-container' ).searchable({ searchField: '#container-search', selector: '.row', childSelector: '.col-xs-4', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });

Related: See More


Questions / Comments:

Hi, doesnt work for me.
Bootstrap, jquery enabled, library added (but not well maybe) ...
Can someone send me an archive with this search bar working ?
View ok, table ok, but animation doesnt work.

Balison () - 4 years ago - Reply -1


Demo doesnt work

MrEdinLaw () - 2 weeks ago - Reply 0


Hello , guys , okay?

I need to let the hidden list and only show when you enter any character , does anyone know how to solve this ?

Richard Barcelos () - 2 years ago - Reply 0


And how about highlighting the results???

Патрик Жданов () - 3 years ago - Reply 0


Great, it works like a charm =)

How about adding a pagination??? That'd be awesome!

Патрик Жданов () - 3 years ago - Reply 0


Thanks

P-J () - 3 years ago - Reply 0


Thanks for the great plugin. I was testing out your demo above and found that your non table "Fuzzy" search doesnt work. Thanks again

Jackman () - 4 years ago - Reply 0


This is great. But I'm new to JQuery, and I have one question. I'm trying to leave my first row in the table as a default that only shows up if there are no other matches. Is this possible?

Grizzly Atoms () - 4 years ago - Reply 0


Hello, thanks for this plugin it works very well ! Except one error : I'm loading content dynamically and when i load this content the searchable function is loaded, it works fine once but when i load a second time the content it doesn't works anymore .. Some solutions ?

Yann () - 4 years ago - Reply 0


Hi, fine snippet! But how about IE? I get the error in IE8 for var b,c=a.split("").reduce(function(a,b){return a+"[^"+b+"]*"+b}). How solve this issue?

Ixtis () - 4 years ago - Reply 0


IE8 lol where are you leaving dude? It's 2015 not 1988 even MS doesn't care of IE8 what would I...

boban () - 4 years ago - Reply 0


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.row-padding {
margin-top: 25px;
margin-bottom: 25px;
}
</style>
<script>
$( '#element' ).searchable({
selector : '.row',
childSelector : '.column',
searchField : '#mySearchInput',
striped : true,
oddRow : { 'background-color': '#f5f5f5' },
evenRow : { 'background-color': '#fff' },
hide : function( elem ) {
elem.fadeOut(50);
},
show : function( elem ) {
elem.fadeIn(50);
},
searchType : 'fuzzy',
onSearchActive : function( elem, term ) {
elem.show();
},
onSearchEmpty: function( elem ) {
elem.hide();
},
onSearchFocus: function() {
$( '#feedback' ).show().text( 'Type to search.' );
},
onSearchBlur: function() {
$( '#feedback' ).hide();
},
clearOnLoad: true
});
</script>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1>jQuery Searchable Plugin</h1>
</div>

You can find the source of this plugin at Github (http://github.com/stidges/j...


</div>
</div>
<div class="row">
<div class="col-lg-12">
<h3>Table / Fuzzy search example</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<input type="search" id="search" value="" class="form-control" placeholder="Search using Fuzzy searching">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table" id="table">
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
<th>Third column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Introducing</td>
<td>jQuery</td>
<td>Searchable</td>
</tr>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
<td>Dolor</td>
</tr>
<tr>
<td>Some</td>
<td>More</td>
<td>Data</td>
</tr>
</tbody>
</table>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h3>Non-table example</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<input type="search" id="container-search" value="" class="form-control" placeholder="Search...">
</div>
</div>
</div>
<div class="container" id="searchable-container">
<div class="row row-padding">
<div class="col-xs-4">Col 1</div>
<div class="col-xs-4">Col 2</div>
<div class="col-xs-4">Col 3</div>
</div>
<div class="row row-padding">
<div class="col-xs-4">Another row</div>
<div class="col-xs-4">With some</div>
<div class="col-xs-4">Other data</div>
</div>
<div class="row row-padding">
<div class="col-xs-4">Lorem</div>
<div class="col-xs-4">Ipsum</div>
<div class="col-xs-4">Dolor</div>
</div>
<div class="row row-padding">
<div class="col-xs-4">Foo</div>
<div class="col-xs-4">Bar</div>
<div class="col-xs-4">Baz</div>
</div>
</div>
<script src="js/jquery.searchable-1.0.0.min.js"></script>

<script src="https://ajax.googleapis.com..."></script>

<script src="js/bootstrap.min.js"></script>

</body>

Hi, i put in all the html css and js but it doesnt work properly like the demo shows, have i done anything wrong?

koushik dey () - 4 years ago - Reply 0


did you download Bootstrap CSS and JS? You can get it at http://getbootstrap.com

maxsurguy () - 4 years ago - Reply 0


I have this error. Uncaught TypeError: Object [object Object] has no method 'searchable'

Mathieeeuu () - 4 years ago - Reply 0


That means you did not download and include the jQuery Searchable plugin, for example like this:
<script src="js/jquery.searchable-1.0.0.min.js"></script>

maxsurguy () - 4 years ago - Reply 0


Hi, i put in all the html css and js but it doesnt work properly like the demo shows, have i done anything wrong?

Alexxxx () - 4 years ago - Reply 0


Hello man.

The plugin will not work properly if you do not include the jQuery library and this plugin:

https://github.com/stidges/...

kuroski () - 4 years ago - Reply 0


Do you have jQuery enabled? Also what errors do you see in the console in Web Developer Tools (use Chrome to see that)?

maxsurguy () - 4 years ago - Reply 0


Great job I will request you to add your project in an public CDN Such as http://cdnjs.com/ or http://www.jsdelivr.com/ so that we can easily use it in future.

Shubanker Chourasia () - 4 years ago - Reply 0


Hi, I've got trouble using this. I'm appending the elemnts after the site loaded. I get them from mysql using ajax afterwards i add the using ("#searchable-container").append("recieved data"). Now the new elemnts are displayed in the table but i can't search them. How may I solve this problem?
Thanks for helping

fasin () - 4 years ago - Reply 0


I think you need to enable .searchable only after the content is loaded. Make sure to put that in the .done() function of Ajax

maxsurguy () - 4 years ago - Reply 0


thanks a lot. now it's perfectly working :)

fasin () - 4 years ago - Reply 0


Great script! All working fine. One question though. I only want to start showing the results in the table as the user starts typing in the search form. How can I do this? Help ill be much appreciated. Thanks

Mauzer () - 5 years ago - Reply 0


Do you mean you want to hide the table and only show it after searching?

Stidges () - 5 years ago - Reply 0


Hi Stidges - basically as soon as a user starts typing the results that's when I want the results to start showing. Cheers

Mauzer () - 5 years ago - Reply 0


As it currently stands this is not possible from inside the plugin. What would you think if I add onSearchStart, onSearchActive etc? That would provide a way for you to hook into some events during search

Stidges () - 5 years ago - Reply 0


Sounds good yes. As I will be building up a record set dynamically from a database, the record set might contain hundreds of recordset so I wouldn't want them being displayed all at once. Thanks ever so much. Will be a great help.:-)

Mauzer () - 5 years ago - Reply 0


Released version 1.1.0, which supports the onSearchActive, onSearchEmpty, onSearchFocus and onSearchBlur events! Enjoy :)

Stidges () - 5 years ago - Reply 0


Fantastic thanks for taking the time to do this for me Stidges - very much appreciated! :-). I'm afraid that I'm a a bit of a novice when it comes to core jQuery, could I therefore ask you to perhaps point me in the right direction on how to implement this? (i.e. what do I need to do on the HTML page to hide the results and only show the form input box until the user starts inputting text? I've tried but I'm not exactly sure what parts to change to make this work. Much appreciated!

Mauzer () - 5 years ago - Reply 0


Good job guy !
I have a question: If I had a table with pagination, how could use this plugin?
Tks !

Lucas Andrioli () - 5 years ago - Reply 0


Thanks! Are you using server side pagination or client side?

Stidges () - 5 years ago - Reply 0


I'm using server side pagination

Lucas Andrioli () - 5 years ago - Reply 0


Hmm, I am afraid that isn't possible. You would only be able to search through the items in the current page

Stidges () - 5 years ago - Reply 0


how to use jquery to the table or gridview like "non-table example" i mean the animation

jonOne () - 5 years ago - Reply 0


Do you mean adding the animations to the table? Not all jQuery animations are supported by table rows I am afraid, you may have to use css to achieve the animations

Stidges () - 5 years ago - Reply 0


Thanks

jonOne () - 5 years ago - Reply 0


what if I need to search by providing more column values

Sunil () - 5 years ago - Reply 0


I am not sure what you mean, could you explain it further? Thanks!

Stidges () - 5 years ago - Reply 0


Good job man!
I would like to use this with click on tags instead of a search field: what should I modify ?

pidl () - 5 years ago - Reply 0


Thanks! Could you open an issue on github? I might at that as a feature :)

Stidges () - 5 years ago - Reply 0