簡體   English   中英

可以將jQuery Quicksearch配置為僅返回完全匹配嗎?

[英]Can jQuery Quicksearch be configured to only return exact matches?

我正在使用jQuery Quicksearch ,想知道是否有一種方法可以對其進行調整,使其僅返回搜索的完全匹配項。 任何幫助將非常感激。

謝謝

從jquery quicksearch插件的文檔中,您似乎可以使用testQuery選項來定義一個函數,該函數指示是否應隱藏項目:

testQuery函數,用於告知是否應隱藏給定的項目。 它需要3個參數:

  • 由“ prepareQuery”准備的查詢

  • 從“選擇器”中剝離文本

  • 可能被隱藏的元素

似乎在testQuery方法中接收到的query參數是一個數組。 因此,我們可以獲取數組的第一項(這是輸入中引入的文本),也可以使用prepareQuery選項按prepareQuery返回查詢(字符串):

prepareQuery: function(val) {
    return val;
}

現在,我們將查詢參數作為字符串,如果您想要完全匹配,則可以嘗試將testQuery與以下內容配合使用:

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

使用這兩個選項,我們將比較輸入文本(這是testQueryquery參數)和該行的所有文本(包括所有單元格,這是testQuerytxt參數)。

如果要匹配任何單元格中的確切文本,則需要在selector選項中進行定義。

這是一個按電子郵件列匹配的小提琴 (這是因為我們傳遞的選擇器選項等於th )。 請注意,只有在引入的文本與單元格內容完全匹配時才會顯示行。

您需要用'prepareQuery': function (val) { return new RegExp("^" + val + "$", "i"); }替換prepareQuery方法以與完整字符串匹配'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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM