Search within dropdowns searches all the dropdown options instead of selected option

Question

We have implemented a jQuery DataTables and its column level search features using the code as given in link

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

We have implemented dropdown on column using mrender of jquery datatable.

We are unable to search exact data in columns having drop-downs using column search. I observed that the search function searches within all option values of the drop down column instead of the "selected" value.

Can we avoid searching in all the options of the drop-down?

The other observation is that it searches within other related DOM elements also instead of the column data on which search function is applied.

DEMO

$(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>

Please post your code and/or create an example on jsFiddle to replicate the problem you're experiencing, otherwise your question is at risk of being closed. See How to create a Minimal, Complete, and Verifiable example for more information. — Gyrocode.com
The example code is given in the following shared Google Document: docs.google.com/document/d/… — Sameer Shinde
Thanks @Gyrocode.com for the code snippet. Can anybody answer this question ? — Sameer Shinde
Your question is not clear, can you provide steps to reproduce the problem and expected results (for example, select "Contains" in column "Name", type "Airi", etc)? There was minor javascript error which I fixed, otherwise your code seems to work OK. — Gyrocode.com
Please have a look at the search box below Vehicle drop down. If I search for a word 'Volvo', datatable wont filter the table to first record for which 'Volvo' value has been selected but it retains all the rows. This second row is also retained as it's option contains the word 'Volvo'. How can we enable the search to search within selected values of Drop-downs only? — Sameer Shinde

Gyrocode.com Gyrocode.com · Accepted Answer · 2015-08-19T09:29:01

SOLUTION

You can use columnDefs to target a specific column using zero-based index in targets option and render to return selected value during searching (type === 'filter') or sorting (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;
         }
      }
   ]
});

Also you need to invalidate cell data once data changes as shown below (according to this solution).

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

DEMO

See this example for code and demonstration.

LINKS

See jQuery DataTables: How to search and order by INPUT or SELECT elements for more details.

Search within dropdowns searches all the dropdown options instead of selected option

1 Answers

SOLUTION

DEMO

LINKS