How can I make my search form work with uppercase and lowercase

Question

I want my search form to work with uppercase and lowercase. So whenever I input something that's lowercase it will also show me te uppercase results in the table I'm searching in.

Here's my javascript

function searchFunction() {
var searchText = document.getElementById('database_search_bar').value;
var targetTable = document.getElementById('database_table');
var targetTableColCount;

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

    if (rowIndex == 0) {
       targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
       continue; 
    }

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

Can anyone help me with this?

Answer 1

Change this line:

 if (rowData.indexOf(searchText) == -1)

to:

 if (rowData.toLowerCase().indexOf(searchText.toLowerCase()) == -1)

This way, for comparison, you will be using lower case strings only. Ie if searchText was "Lorem Ipsum" and rowData was "I HAVE LOREM IPSUM WITHIN", they'll become "lorem ipsum" and "i have lorem ipsum within" respectively - thus, they'll match.

String.prototype.toLowerCase() reference.

Also note that in ES6 you have String.prototype.includes() that might be used for what you're doing. It'll read a bit better - however it's not supported in IE at the moment.

Answer 2

If you want to ignore case, may be you should make both side to be upper case or lower case.

In your case, you can use toUpperCase() or toLowerCase() on rowData and searchText .

var upperData = rowData.toUppercase();
var upperText = searchText.toUppercase();
if (upperData.indexOf(upperText) == -1) {
  //Not Found
}
else {
  //Found
}

Answer 3

This is an alternative:

The trick is homogenize the comparison.

How to do this homogenization?

• Just convert the elements to compare to the same type.
• But they are strings, yeah but A is different to a . So, we may lowercase all or uppercase all. But, How?
• Using toLowerCase() or toUpperCase()() methods.

I created a notFound() that lowercase rowData and searchText and then returns false if the indexOf is -1 otherwise will return true . Sorry, It took me long time to fill the table with countries and continents.

 var searchButton = document.getElementById('search_button'); searchButton.addEventListener('click', searchFunction) function searchFunction() { var searchText = document.getElementById('database_search_bar').value; var targetTable = document.getElementById('database_table'); var notFoundText = document.getElementById('not_found'); var targetTableColCount; var hasResult = false; notFoundText.innerHTML = ''; for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) { var rowData = ''; if (rowIndex == 0) { targetTableColCount = targetTable.rows.item(rowIndex).cells.length; continue; } for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) { rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent; } if (notFound(rowData, searchText)) { targetTable.rows.item(rowIndex).style.display = 'none'; } else { targetTable.rows.item(rowIndex).style.display = 'table-row'; hasResult = true; } } if (!hasResult){ notFoundText.innerHTML = 'There are no results.'; } } function notFound(rowData, searchText){ return rowData.toLowerCase().indexOf(searchText.toLowerCase()) === -1; } 

 table td { width: 150px; } 

 Search Text: <input id="database_search_bar" type="text" name="fname"><input id="search_button" type="submit" value="Search"> <p></p> <table id="database_table" > <tr> <th>Country</th> <th>Continent</th> </tr> <tr> <td>Brazil</td> <td>South America</td> </tr> <tr> <td>Jordan</td> <td>Asia</td> </tr> <tr> <td>Mauritania</td> <td>Africa</td> </tr> <tr> <td>United States of America</td> <td>North America</td> </tr> <tr> <td>Netherlands</td> <td>Europe</td> </tr> <tr> <td>Oman</td> <td>Asia</td> </tr> <tr> <td>Honduras</td> <td>South America</td> </tr> <tr> <td>Lithuania</td> <td>Europe</td> </tr> </table> <div id="not_found" ></div>