如何使我的搜索表單使用大寫和小寫

Question

我希望我的搜索表單可以使用大寫和小寫字母。 因此，每當我輸入小寫字母時，它也會在要搜索的表中向我顯示大寫結果。

這是我的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';
}

誰能幫我這個？

Answer 1

更改此行：

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

至：

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

這樣，為了進行比較，您將僅使用小寫字符串。 即，如果searchText是“ Lorem ipum”，而rowData是“ I LOVE IPSUM WITHIN”，它們將分別變為“ lorem ipsum”和“我內部有lorem ipsum”-因此，它們將匹配。

String.prototype.toLowerCase()引用。

還要注意，在ES6中，您可以使用String.prototype.includes()進行操作。 它會讀得更好-但是IE目前不支持它。

Answer 2

如果您想忽略大小寫，可能您應該將雙方設為大寫或小寫。

就您而言，可以在rowData和searchText上使用toUpperCase()或toLowerCase() 。

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

Answer 3

這是一種替代方法：

訣竅是使比較均勻。

如何進行均質化？

• 只需將元素轉換為相同類型即可。
• 但是它們是字符串，是的，但是A與a不同。 因此，我們可以全部小寫或全部大寫。 但是，如何？
• 使用toLowerCase()或toUpperCase()()方法。

我創建了一個notFound()小寫的rowData和searchText ，然后如果indexOf為-1則返回false ，否則將返回true 。 抱歉，我花了很長時間才把國家和大洲塞滿了桌子。

 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>