可以将jQuery Quicksearch配置为仅返回完全匹配吗?

时间:2019-05-01 13:57:58

标签: javascript jquery exact-match quick-search

我正在使用jQuery Quicksearch,想知道是否有一种方法可以将其调整为仅返回搜索的完全匹配项。任何帮助将不胜感激。

谢谢

2 个答案:

答案 0 :(得分:1)

在jquery quicksearch插件的documentation中,您似乎可以使用testQuery选项来定义一个函数,该函数指示是否应隐藏项目:

  

testQuery 函数,用于告知是否应隐藏给定的项目。它需要3个参数:

     
      
  • 由“ prepareQuery”准备的查询

  •   
  • 从“选择器”中剥离文本

  •   
  • 可能被隐藏的元素

  •   

虽然query方法中收到的testQuery参数似乎是一个数组。因此,我们可以获取数组的第一项(输入中引入的文本),也可以使用prepareQuery选项返回查询(字符串):

prepareQuery: function(val) {
    return val;
}

现在我们将查询参数作为字符串使用,如果您希望完全匹配,可以尝试将testQuery与类似的东西一起使用

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

使用这两个选项,我们将比较输入文本(在query中的testQuery参数)与行的所有文本(包括所有单元格,即{{1}) } txt中的参数。

如果要匹配任何单元格中的确切文本,则需要在testQuery选项中进行定义。

此处是一个fiddle,该列通过电子邮件列匹配(这是因为我们传递的 selector 选项等于selector)。请注意,只有在引入的文本与单元格内容完全匹配时才会显示行。

答案 1 :(得分:1)

您需要替换prepareQuery方法,以将完整字符串与'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>