jQuery DataTables -使用完全匹配进行搜索

ryevplcw  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(302)

我有一个HTML选择框,它将返回正确的值。任务使用select2和datables我的选择框

<select name="filter_model" id="filter_model" class="form-control" required multiple="multiple">
      <option value="Drafted">Drafted</option>
      <option value="Ordered">Ordered</option>
      <option value="Ordered (A)">Ordered (A)</option>
      <option value="PreProduction">PreProduction</option>
      <option value="PreProduction (C)">PreProduction (C)</option>
   </select>

我还有一个jQuery代码。

var table = $('#editable').DataTable();
   var data = $.map( $(this).select2('data'), function( value, key ) {
                if(value.text !== '') {
                   return value.text.trim();
                 }
   });
   var val = data.join('|');
   table.column(5).search(val).draw();

当用户选择Drafts时,我得到了正确的结果。选择Order(A)或PreProduction(C)时,我得到了我想要的结果。但是,当用户选择Order或PreProduction时,我得到了两个结果(Order & Order(A))和(PreProduction & PreProduction(C))。有人请帮助我。

tnkciper

tnkciper1#

仅查找特定数据列中的完全匹配项要求您使用DataTables search()函数,并将regex参数设置为true(并且还应禁用智能搜索参数):

.search(searchTerm, true, false)

您还需要将每个Select2项 Package 在前导^和尾随$中,这告诉正则表达式搜索项必须从列数据的开头一直匹配到列数据的结尾。正是这一步确保了Ordered不会也找到Ordered (A)
由于圆括号在正则表达式中有特殊的含义(用于分组),并且select2值包含圆括号,因此必须对这些值进行转义:

replace('(', '\\(').replace(')', '\\)')

您还需要处理没有选择select2值的情况。以便DataTables可以将其筛选器重置为“nothing filtered”。DataTables期望为此接收空字符串。
现在,您可以编写逻辑来处理select2多重选择:

$('#filter_model').on('change.select2', function (e) {
  var data = $.map( $(this).select2('data'), function( value ) {
    return '^' + value.text.replace('(', '\\(').replace(')', '\\)').trim() + '$';
  });
  searchTerm = '';
  if (data.length > 0) {
    searchTerm = data.join('|');
  }
  console.log( searchTerm );
  table.column(5).search(searchTerm, true, false).draw();
});

下面是一个可运行的演示:
第一个
这里有一个注解掉的日志记录语句。你可以取消注解来查看每个搜索词。

更新

而不是这样:

replace('(', '\\(').replace(')', '\\)')

...您可能需要考虑以下Mozilla指南解决方案:
replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
其中$&表示整个匹配字符串。
它转义字符串中可能具有特殊正则表达式含义的每个字符,而不仅仅是()
另请参阅此处的讨论:Is there a RegExp.escape function in JavaScript?

相关问题