Home How to move focus to search results after selecting the Search button on a table?

Questions

How to move focus to search results after selecting the Search button on a table?

May 23, 2023

I am working on a page where I have a table with Search Results button.

Is there a way set the focus to the Results once the user selects the "Search Results" button. I want the focus to go to "Showing X number of entries" text or dropdown so that the user knows that the page is updated with results.

Please advise. Thanks in advance.

Here is my code-

$(document).ready(function() {
  var table = $('#example').DataTable({
    
    responsive: true,
    searching: true,
    
    columnDefs: [
            {
                target: 6,
                visible: false,
                searchable: true,
            }
      ],
    
    dom: 'Bifrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                exportOptions: {
                    columns: ':visible'
                     }
              },           
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                }
               },
        //  'colvis'
        ],
  });

  buildSelect(table);
 
  table.on('draw search', function() {
    buildSelect(table);
  });
         
$('#myInput').on( 'click', function () {
  table.draw(); 
} );
          
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select><option value="">select me</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false);
          //.draw();
      });

    if ( column.index() === 0 ) {
      var filteredNames = column.data().unique().toArray();
      ['Garrett', 'Test1', 'Ashton'].forEach((d) => {
        if (filteredNames.includes(d)) {
          select.append('<option value="' + d + '">' + d + '</option>');
        }
      });
    } else {
      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>');
      });
    }

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
      // ** MY CHANGE **
      // Use RegEx to find the selected value from the unique values of the column.
      // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>

    
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<div class="searchbox">
<p>Name: 
  
  <span id="dropdown1">
  </span>
</p>

<p>Postion: <span id="dropdown2">
  </span>
</p>

<p>Office: <span id="dropdown3">
</span>
</p>
  
<button type="button" id="myInput">Search Results</button>
<button type="button" id="test">Clear Filters</button>
  
</div>
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
  <th>&#160;</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Hidden Column</th>
          </tr>
        </thead>
        
        <tbody>
          <tr>
            <td>
Test1</td>


            <td>test</td>
            <td>test3</td>
            <td>test4</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>Sys Architect</td>
          </tr>
          <tr>
            <td>Garrett</td>
            <td>Director: fgghghjhjhjhkjkj</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td>Director:</td>
          </tr>
          <tr>
            <td>Ashton</td>
            <td>Technical Authorjkjkjk fdfd h gjjjhjhk</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td>Tech author</td>
          </tr>
          
            
          </tr></tbody></table>
</div>

>Solution :

You could flash your search result text and set input to any input element you want, there’s no much sense imho in setting the focus to the text.

$(document).ready(function() {
  var table = $('#example').DataTable({
    
    responsive: true,
    searching: true,
    
    columnDefs: [
            {
                target: 6,
                visible: false,
                searchable: true,
            }
      ],
    
    dom: 'Bifrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                exportOptions: {
                    columns: ':visible'
                     }
              },           
            {
                extend: 'print',
                exportOptions: {
                    columns: ':visible'
                }
               },
        //  'colvis'
        ],
  });

  buildSelect(table);
 
  table.on('draw search', function() {
    buildSelect(table);
  });
         
$('#myInput').on( 'click', function () {
  table.draw(); 
  // focus the search box
  setTimeout(()=>{
    
    // mark the search results
    
    $('.dataTables_info').css({background:'yellow'});
    
    setTimeout(()=>{
      $('.dataTables_info').css({background:'white',transition:'1s'})
      setTimeout(()=>$('.dataTables_info').css({transition:''}), 1000);
    }, 100);

    // set focus to search input or any other element you like

    $('input[type=search]').focus();
  });
  
});
          
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select><option value="">select me</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false);
          //.draw();
      });

    if ( column.index() === 0 ) {
      var filteredNames = column.data().unique().toArray();
      ['Garrett', 'Test1', 'Ashton'].forEach((d) => {
        if (filteredNames.includes(d)) {
          select.append('<option value="' + d + '">' + d + '</option>');
        }
      });
    } else {
      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>');
      });
    }

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
      // ** MY CHANGE **
      // Use RegEx to find the selected value from the unique values of the column.
      // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>

    
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<div class="searchbox">
<p>Name: 
  
  <span id="dropdown1">
  </span>
</p>

<p>Postion: <span id="dropdown2">
  </span>
</p>

<p>Office: <span id="dropdown3">
</span>
</p>
  
<button type="button" id="myInput">Search Results</button>
<button type="button" id="test">Clear Filters</button>
  
</div>
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
  <th>&#160;</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Hidden Column</th>
          </tr>
        </thead>
        
        <tbody>
          <tr>
            <td>
Test1</td>


            <td>test</td>
            <td>test3</td>
            <td>test4</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>Sys Architect</td>
          </tr>
          <tr>
            <td>Garrett</td>
            <td>Director: fgghghjhjhjhkjkj</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td>Director:</td>
          </tr>
          <tr>
            <td>Ashton</td>
            <td>Technical Authorjkjkjk fdfd h gjjjhjhk</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td>Tech author</td>
          </tr>
          
            
          </tr></tbody></table>
</div>