Posted By admin
Tags: , ,
jQuery Searchable Plugin
Demo

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.,Demo doesnt work,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 ?,And how about highlighting the results???,Great, it works like a charm =),How about adding a pagination??? That’d be awesome!,Thanks,Thanks for the great plugin. I was testing out your demo above and found that your non table “Fuzzy” search doesnt work. Thanks again,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?,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 ?,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?,IE8 lol where are you leaving dude? It’s 2015 not 1988 even MS doesn’t care of IE8 what would I…,<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?,did you download Bootstrap CSS and JS? You can get it at http://getbootstrap.com,I have this error. Uncaught TypeError: Object [object Object] has no method ‘searchable’,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>,Hi, i put in all the html css and js but it doesnt work properly like the demo shows, have i done anything wrong?,Hello man.,The plugin will not work properly if you do not include the jQuery library and this plugin:,https://github.com/stidges/…,Do you have jQuery enabled? Also what errors do you see in the console in Web Developer Tools (use Chrome to see that)?,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.,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,I think you need to enable .searchable only after the content is loaded. Make sure to put that in the .done() function of Ajax,thanks a lot. now it’s perfectly working :),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,Do you mean you want to hide the table and only show it after searching?,Hi Stidges – basically as soon as a user starts typing the results that’s when I want the results to start showing. Cheers,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,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.:-),Released version 1.1.0, which supports the onSearchActive, onSearchEmpty, onSearchFocus and onSearchBlur events! Enjoy :),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!,Good job guy ! I have a question: If I had a table with pagination, how could use this plugin?Tks !,Thanks! Are you using server side pagination or client side?,I’m using server side pagination,Hmm, I am afraid that isn’t possible. You would only be able to search through the items in the current page ,how to use jquery to the table or gridview like “non-table example” i mean the animation,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 ,Thanks,what if I need to search by providing more column values,I am not sure what you mean, could you explain it further? Thanks!,Good job man! I would like to use this with click on tags instead of a search field: what should I modify ?,Thanks! Could you open an issue on github? I might at that as a feature :),The author is stidges

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *