Can jQuery Quicksearch be configured to only return exact matches?

Question

I'm using jQuery Quicksearch and am wondering if there is a way to adjust it to only return exact matches for the search. Any help would be much appreciated.

Thanks

Answer 1

From the documentation of jquery quicksearch plugin, it seems that you could use the testQuery option to define a function that tells if an item should be hidden or not:

testQuery Function that tells if a given item should be hidden. It takes 3 arguments:

• query prepared by 'prepareQuery'

• stripped text from 'selector'

• element to be potentially hidden

It seems that the query param received in the testQuery method is an array though. So we can grab the first item of the array (which is the text introduced in the input) or we can use the prepareQuery option to return the query as it is (a string):

prepareQuery: function(val) {
    return val;
}

Now that we have the query param as a string, if you want an exact match you could try using testQuery with something like:

testQuery: function (query, txt, _row) {
    return query === txt;
}

With these two options we would be comparing the input text (which is the query parameter in testQuery ) with all the text of the row (including all cells, which is the txt parameter in testQuery ).

If we want to match the exact text in any cell, we need to define that in the selector option.

Here is a fiddle that matches by email column (that's because we are passing the selector option equal to th ). Take into account that the rows will only be showed when the introduced text matches exactly with the cell content.

Answer 2

You need to replace prepareQuery method to match against the full string with 'prepareQuery': function (val) { return new RegExp("^" + val + "$", "i"); } 'prepareQuery': function (val) { return new RegExp("^" + val + "$", "i"); }

 $('input#id_search2').quicksearch('table#table_example2 tbody tr', { 'delay': 300, 'selector': 'th', 'stripeRows': ['odd', 'even'], 'loader': 'span.loading', 'bind': 'keyup click input', 'show': function () { this.style.color = ''; }, 'hide': function () { this.style.color = '#ccc'; }, 'prepareQuery': function (val) { return new RegExp("^" + val + "$", "i"); }, 'testQuery': function (query, txt, _row) { return query.test(txt); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.4.0/jquery.quicksearch.min.js"></script> <h3>Example with options — search with email regexp on &lt;th&gt; only</h3> <form action="#"> <fieldset> <input name="search" value="devo" id="id_search2" type="text"> <span class="loading" style="display: none;">Loading...</span> </fieldset> </form> <table id="table_example2"> <thead> <tr> <th width="30%">Email</th> <th width="10%">Id</th> <th width="10%">Phone</th> <th width="10%">Total</th> <th width="10%">Ip</th> <th width="10%">Url</th> <th width="10%">Time</th> <th width="10%">ISO Date</th> <th width="10%">UK Date</th> </tr> </thead> <tbody> <tr class="odd"> <th>devo@flexomat.com</th> <td>66672</td> <td>941-964-8535</td> <td>$2482.79</td> <td>172.78.200.124</td> <td>http://gmail.com</td> <td>15:10</td> <td>1988/12/14</td> <td>14/12/1988</td> </tr> <tr class="even" style="color: rgb(204, 204, 204);"> <th>henry@mountdev.net</th> <td>35889</td> <td>941-964-9543</td> <td>$2776.09</td> <td>119.232.182.142</td> <td>http://www.gmail.com</td> <td>3:54</td> <td>1974/1/19</td> <td>19/1/1974</td> </tr> <tr class="odd" style="color: rgb(204, 204, 204);"> <th>christian@reno.gov</th> <td>60021</td> <td>941-964-5617</td> <td>$2743.41</td> <td>167.209.64.181</td> <td>http://www.dotnet.ca</td> <td>10:58</td> <td>2000/3/25</td> <td>25/3/2000</td> </tr> <tr class="even" style="color: rgb(204, 204, 204);"> <th>muffins@donuts.com</th> <td>17927</td> <td>941-964-9511</td> <td>$2998.18</td> <td>210.214.231.182</td> <td>http://google.se</td> <td>21:22</td> <td>1993/1/24</td> <td>24/1/1993</td> </tr> <tr class="odd" style="color: rgb(204, 204, 204);"> <th>muffins@reno.gov</th> <td>76375</td> <td>941-964-2757</td> <td>$1836.09</td> <td>220.222.93.171</td> <td>http://www.samba.org</td> <td>15:22</td> <td>1988/4/4</td> <td>4/4/1988</td> </tr> <tr class="even" style="color: rgb(204, 204, 204);"> <th>mendez@gmail.com</th> <td>45834</td> <td>941-964-2575</td> <td>$2805.46</td> <td>228.170.245.253</td> <td>http://flexomat.com</td> <td>11:31</td> <td>1975/12/12</td> <td>12/12/1975</td> </tr> <tr class="odd" style="color: rgb(204, 204, 204);"> <th>dev@gmail.com</th> <td>20022</td> <td>941-964-4967</td> <td>$3296.54</td> <td>175.248.70.240</td> <td>http://www.flexomat.com</td> <td>4:27</td> <td>2002/7/3</td> <td>3/7/2002</td> </tr> <tr class="even" style="color: rgb(204, 204, 204);"> <th>foo@polyester.se</th> <td>55977</td> <td>941-964-745</td> <td>$2953.73</td> <td>222.114.227.156</td> <td>http://www.donuts.com</td> <td>23:49</td> <td>1977/8/4</td> <td>4/8/1977</td> </tr> <tr class="odd" style="color: rgb(204, 204, 204);"> <th>adam@aftonbladet.se</th> <td>38867</td> <td>941-964-6302</td> <td>$1949.27</td> <td>116.241.143.196</td> <td>http://flexomat.com</td> <td>23:35</td> <td>1995/7/27</td> <td>27/7/1995</td> </tr> <tr class="even"> <th>devo@donuts.com</th> <td>51426</td> <td>941-964-1234</td> <td>$1067.00</td> <td>88.96.149.82</td> <td>http://www.polyester.se</td> <td>15:17</td> <td>1986/1/5</td> <td>5/1/1986</td> </tr> <tr class="odd" style="color: rgb(204, 204, 204);"> <th>henry@samba.org</th> <td>40859</td> <td>941-964-4856</td> <td>$3401.19</td> <td>68.152.250.74</td> <td>http://www.flexomat.com</td> <td>4:36</td> <td>1990/3/7</td> <td>7/3/1990</td> </tr> <tr class="even" style="color: rgb(204, 204, 204);"> <th>found@dotnet.ca</th> <td>23986</td> <td>941-964-2686</td> <td>$1393.52</td> <td>98.102.181.138</td> <td>http://lostnfound.org</td> <td>5:51</td> <td>1993/7/22</td> <td>22/7/1993</td> </tr> <tr class="odd" style="color: rgb(204, 204, 204);"> <th>carl@fish.org</th> <td>73392</td> <td>941-964-5792</td> <td>$3876.04</td> <td>246.234.182.243</td> <td>http://www.google.se</td> <td>6:52</td> <td>1984/7/14</td> <td>14/7/1984</td> </tr> <tr class="even" style="color: rgb(204, 204, 204);"> <th>found@mountdev.net</th> <td>03519</td> <td>941-964-1599</td> <td>$1176.48</td> <td>104.212.122.177</td> <td>http://donutsx.com</td> <td>18:52</td> <td>2000/8/6</td> <td>6/8/2000</td> </tr> </tbody></table>