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
2 Answers
1
On
You need to replace prepareQuery method to match against the full string with '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 <th> 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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>
From the documentation of jquery quicksearch plugin, it seems that you could use the
testQueryoption to define a function that tells if an item should be hidden or not:It seems that the
queryparam received in thetestQuerymethod 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 theprepareQueryoption to return the query as it is (a string):Now that we have the query param as a string, if you want an exact match you could try using
testQuerywith something like:With these two options we would be comparing the input text (which is the
queryparameter intestQuery) with all the text of the row (including all cells, which is thetxtparameter intestQuery).If we want to match the exact text in any cell, we need to define that in the
selectoroption.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.