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 () - 9 years ago - Reply -1
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 () - 8 years ago - Reply 0
Great, it works like a charm =)
How about adding a pagination??? That'd be awesome!
Патрик Жданов () - 9 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 () - 9 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 () - 9 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 () - 10 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 () - 10 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 () - 9 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 () - 10 years ago - Reply 0
did you download Bootstrap CSS and JS? You can get it at http://getbootstrap.com
maxsurguy () - 10 years ago - Reply 0
I have this error. Uncaught TypeError: Object [object Object] has no method 'searchable'
Mathieeeuu () - 10 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 () - 10 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 () - 10 years ago - Reply 0
Hello man.
The plugin will not work properly if you do not include the jQuery library and this plugin:
kuroski () - 10 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 () - 10 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 () - 10 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 () - 10 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 () - 10 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 () - 10 years ago - Reply 0
Do you mean you want to hide the table and only show it after searching?
Stidges () - 10 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 () - 10 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 () - 10 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 () - 10 years ago - Reply 0
Released version 1.1.0, which supports the onSearchActive, onSearchEmpty, onSearchFocus and onSearchBlur events! Enjoy :)
Stidges () - 10 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 () - 10 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 () - 10 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 () - 10 years ago - Reply 0
how to use jquery to the table or gridview like "non-table example" i mean the animation
jonOne () - 10 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 () - 10 years ago - Reply 0
I am not sure what you mean, could you explain it further? Thanks!
Stidges () - 10 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 () - 10 years ago - Reply 0
Thanks! Could you open an issue on github? I might at that as a feature :)
Stidges () - 10 years ago - Reply 0
