[Vuejs]-How can I make my filter function for my table case insensitive?

by

1👍

✅

You can use the toLowerCase string method.

if (rowData.toLowerCase().indexOf(searchText.toLowerCase()) === -1) {
  targetTable.rows.item(rowIndex).style.display = 'none'
} else {
  targetTable.rows.item(rowIndex).style.display = 'table-row'
}
👤Ivan Mladenov

1👍

It seems to me you’re doing more work than necessary. If the intention is to show rows that have the search text, then use the textContent of the row rather than concatenating all the cell values, and also set the display to “none” or “”, so the element adopts its default or inherited display without you having to program it. E.g.

function doSearch() {
  var searchText = document.getElementById('i0').value.toLowerCase();
  var table = document.getElementById('t0');
  var row, rows = table.rows;
  // Skip first row
  for (var i=1, iLen=rows.length; i<iLen; i++) {
    row = rows[i];
    row.style.display = row.textContent.toLowerCase().indexOf(searchText) == -1? 'none' : '';    
  }
}
<table id="t0">
  <tr><th>Index<th>name
  <tr><td>0<td>Foo
  <tr><td>1<td>Bar
</table>
Search text:<input id="i0">
<button onclick="doSearch()">Do search</button>
👤RobG

1👍

This part:

    if (rowData.indexOf(searchText) === -1) {
      targetTable.rows.item(rowIndex).style.display = 'none'
    } else {
      targetTable.rows.item(rowIndex).style.display = 'table-row'
    }

Lets change it to:

    if (isInsideInsensitive(rowData,searchText)) {
      targetTable.rows.item(rowIndex).style.display = 'none'
    } else {
      targetTable.rows.item(rowIndex).style.display = 'table-row'
    }

With additional function:

function isInsideInsensitive(a, b){
     return a.toLowerCase().indexOf(b.toLowerCase()) != -1;
}

Take a look at the isInsideInsensitive function

👤Hans Yulian

Leave a comment