在下拉列表中搜索搜索所有下拉选项而不是选定选项答案

【问题标题】：Search within dropdowns searches all the dropdown options instead of selected option在下拉列表中搜索搜索所有下拉选项而不是选定选项
【发布时间】：2015-08-17 10:42:56
【问题描述】：

我们使用链接中给出的代码实现了一个 jQuery DataTables 及其列级搜索功能

https://datatables.net/examples/api/multi_filter.html

我们已经使用 jquery 数据表的mrender 实现了列下拉。

我们无法使用列搜索来搜索具有下拉列表的列中的确切数据。我观察到搜索功能在下拉列的所有选项值中搜索，而不是在“选定”值中搜索。

我们可以避免在下拉列表的所有选项中搜索吗？

另一个观察结果是它也在其他相关的 DOM 元素中搜索，而不是应用搜索功能的列数据。

演示

$(document).ready(
   function() {

       $('#example tfoot th').each(
               function() {
                   var title = $('#example thead th').eq(
                           $(this).index()).text();
                   $(this).html(
                           '<input type="text" placeholder="Search '
                                   + title
                                   + '" style="width: 85%;"/> '
                                   + $("#selectOpt").html());
               });

       var table = $('#example').DataTable({
           dom : 'RC<"clear">lfrtip',
           stateSave : true
       });
       window.mtable = table;
       $("#example tfoot input").on(
               'keyup change',
               function() {
                   var selOps = $(this.parentElement).find(
                           'select');
                   var regex = true;
                   var smart = false;
                   var val = this.value;
                   switch (selOps.val()) {
                   case "beginWith":
                       val = "^" + val;
                       break;
                   case "contains":
                       regex = false;
                       smart = true;
                       break;
                   case "doesNotContain":
                       val = "^((?!" + val + ").)*$";
                       break;
                   case "endsWith":
                       val = val + "$";
                       break;
                   case "equals":
                       val = "^" + val + "$";
                       break;
                   case "doesNotEqual":
                       val = "^(?!" + val + ")";
                       break;
                   }
                   var t1 = table.column($(this).parent().index()
                           + ':visible');
                   var t2 = t1.search(val, regex, smart);
                   t2.draw();
               });
   });

<!doctype html>
<html>
<head>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
   <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
   <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
  
   <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/colreorder/1.1.3/css/dataTables.colReorder.min.css">
   <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.min.css">
   <script type="text/javascript" language="javascript" src="//cdn.datatables.net/colreorder/1.1.3/js/dataTables.colReorder.min.js"></script>
   <script type="text/javascript" language="javascript" src="//cdn.datatables.net/colvis/1.1.2/js/dataTables.colVis.min.js"></script>
</head>
<body>
   <div id="selectOpt">
      <select style="width: 19px;">
         <option value="beginWith">Begin's With</option>
         <option value="contains" selected>Contains</option>
         <option value="doesNotContain">Doesn't Contains</option>
         <option value="endsWith">Ends With</option>
         <option value="equals">Equals</option>
         <option value="doesNotEqual">Doesn't Equals</option>
      </select>
   </div>
   <a name="Example"></a>
   <h2 data-anchor="Example">Example</h2>
   <input type="button" class="btn btn-primary" value="Search" id="searchIBtn"/>
   <p>
   <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
         <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Vehicle</th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <th>Select</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Vehicle</th>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td><input type="checkbox" class="chkBox"></td>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>
               <select>
                  <option selected value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
               </select>
            </td>
         </tr>
         <tr>
            <td><input type="checkbox" class="chkBox"></td>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
            <td>
               <select>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option selected value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
               </select>
            </td>
         </tr>
      </tbody>
   </table>
   </p>
</body>

【问题讨论】：

请在 jsFiddle 上发布您的代码和/或创建一个示例来复制您遇到的问题，否则您的问题可能会被关闭。请参阅How to create a Minimal, Complete, and Verifiable example 了解更多信息。
示例代码在以下共享谷歌文档中给出：docs.google.com/document/d/…
感谢@Gyrocode.com 提供代码 sn-p。有人能回答这个问题吗？
您的问题不清楚，能否提供重现问题的步骤和预期结果（例如，在“名称”列中选择“包含”，输入“Airi”等）？我修复了一个小的 javascript 错误，否则您的代码似乎可以正常工作。
请查看车辆下拉菜单下方的搜索框。如果我搜索单词“沃尔沃”，数据表不会将表过滤为已选择“沃尔沃”值的第一条记录，但它会保留所有行。第二行也被保留，因为它的选项包含单词“Volvo”。我们如何才能使搜索仅在下拉列表的选定值内进行搜索？

标签： jquery search datatables

【解决方案1】：

解决方案

您可以使用columnDefs 在targets 选项中使用从零开始的索引来定位特定列，并使用render 在搜索（type === 'filter'）或排序（type === 'order'）期间返回选定的值。

var table = $('#example').DataTable({
   columnDefs: [
      { 
         targets: 7, 
         type: 'string',
         render: function(data, type, full, meta){
            if(type === 'filter' || type === 'sort'){
               var api = new $.fn.dataTable.Api(meta.settings);
               var td = api.cell({row: meta.row, column: meta.col}).node();
               data = $('select, input', td).val();
            }

            return data;
         }
      }
   ]
});

此外，一旦数据发生更改，您需要使单元格数据失效，如下所示（根据this solution）。

$('tbody select, tbody input', table.table().node()).on('change', function(){
     table.row($(this).closest('tr')).invalidate();
});

演示

有关代码和演示，请参阅 this example。

链接

详情请见jQuery DataTables: How to search and order by INPUT or SELECT elements。

【讨论】：

Gyrocode.com，非常感谢您理解该问题并通过详细的工作代码提供快速解决方案。我们已将其合并到我们的项目中，并且运行良好。
@SameerShinde，更正了我的代码，因为一旦更改了选项，它就不起作用了。