riklomas / quicksearch

A jQuery plugin for searching through tables, lists, etc quickly
http://www.lomalogue.com/jquery/quicksearch/
680 stars 261 forks source link

Reset Button #21

Open bernte opened 13 years ago

bernte commented 13 years ago

hi.. is there a way to add an reset button?

i use quicksearch with tablesorter and tried different things to reset the table. i found your(?) old script modified @ http://michael.theirwinfamily.net/demo/jquery/modified-quicksearch/index.html but it isnt compatible to the last one.

i tried some javscript/html code to reset (clear) the search input. i was able to remove the word in the searchinput but the table doesnt get back to beginning.

hope you understand my problem. sorry for my bad english!

best regards

bernte

olivermontes commented 13 years ago

me too, clear botton i nedd

mb1689 commented 12 years ago

I know you both put this comment in some time ago, but I was having some trouble with this too, and was able to find a solution that didn't require modifying quickseach's code, wanted to post it. Code is below:

<div id="searchdiv">
<form action="#">
<input type="text" id="id_search" placeholder="Enter Search Terms..."> <input type="button" onClick="clearTxt()" value="Reset">
</form>
</div>
<!---your table code goes here-->
<script type="text/javascript">
$(document).ready(function () {
        $("#id_search").quicksearch('table tbody tr', {
                'stripeRows': ['odd','even'], 
                'noResults': 'Nothing Found.', 
                'bind': 'focus keyup keydown' 
        });
});

function clearTxt() {
        $("#searchdiv").triggerHandler("focus");
        $("#id_search").val('').focus();
}

Essentially, using jQuery ( v1.7.1 - http://code.jquery.com/jquery-1.7.1.js ), to build the quicksearch as normal, and then add a button named id_search that onClick calls the clearTxt function, which gives focus to the container div, and then clears and gives focus back to the quicksearch filter textbox.

I like to have my list filter as a person types in it (thus the keyup and keydown in the bind option), but in order to make this work and actually clear I also had to add the focus event into the bind. The code should be relatively self-explanatory, but if you have any questions feel free to ask and I'll try to help out.