CODEWITHSUNDEEP
javascriptvue.jseslint
Jude Aquino
Jude Aquino

Reputation: 31

How can I make my filter function for my table case insensitive?

I have a search function on my table and it is only searching for the exact keyword. It will not display data which are not properly capitalized. How can I make it case insensitive so I can display those data even I typed all lowercase words? By the way I'm using ESLINT rules. Here is my javascript code:

myFunction () {
  var searchText = document.getElementById('searchTerm').value
  var targetTable = document.getElementById('myTable')
  var targetTableColCount

  for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
    var rowData = ''

    if (rowIndex === 0) {
      targetTableColCount = targetTable.rows.item(rowIndex).cells.length
      continue // do not execute further code for header row.
    }

    for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
      rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent
    }


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

Upvotes: 0

Views: 204

Answers (3)

Ivan Mladenov
Ivan Mladenov

Reputation: 1847

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'
}

Upvotes: 1

Hans Yulian
Hans Yulian

Reputation: 1180

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

Upvotes: 1

RobG
RobG

Reputation: 147483

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>

Upvotes: 1

Related Questions