使搜索文本框输入值不区分大小写

Question

So I have this table with several rows and the following code for a search textbox:

<input type="text" class="textbox" id="searchTerm" onkeyup="doSearch()" placeholder="Search Rares"/>

When a user enters text into the textbox, the following script is run. The script hides the table's rows according to the textbox input.

// JavaScript Document

function doSearch() {
        var searchText = document.getElementById('searchTerm').value;
        var targetTable = document.getElementById('dataTable');
        var targetTableColCount;

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

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

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

            //If search term is not found in row data
            //then hide the row, else show
            if (rowData.indexOf(searchText) == -1)
                targetTable.rows.item(rowIndex).style.display = 'none';
            else
                targetTable.rows.item(rowIndex).style.display = 'table-row';
        }
    }

The problem is the input is not case-insensitive, so if a user types 'hello' in the textbox and there is 'Hello' in the table, the script will hide the table's row.

I'm a noob at Javascript, so if anyone could help me fix it up easily it would be really appreciated.

Answer 1

Before validating your search results, convert the input to upper case letters and then, when comparing it to the rowData, make it upper case as well.

    // JavaScript Document

    function doSearch() {
    //Get the input value as lower case
    var searchText = document.getElementById('searchTerm').value.toUpperCase(); 
    var targetTable = document.getElementById('dataTable');
    var targetTableColCount;

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

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

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

        //If search term (upper case) is not found in row data
        //then hide the row, else show
        if (rowData.toUpperCase().indexOf(searchText) == -1)
            targetTable.rows.item(rowIndex).style.display = 'none';
        else
            targetTable.rows.item(rowIndex).style.display = 'table-row';
    }
}

EDIT:

As pointed out in the comments by Jakar, you are better off converting all text to upper case instead of lower case (which I initially recommended) The problem is that some characters might not be converted correctly. Source: http://msdn.microsoft.com/en-us/library/bb386042.aspx