我怎樣才能讓我的搜索形式工作，大寫和小寫

Question

我想我的搜索形式與大寫和小寫工作。所以每當我輸入東西是小寫，這也將顯示我的表我在尋找英寸

這裏TE大寫的結果是我的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存有」和rowData是「我有LOREM IPSUM以內」，他們將成爲「Lorem存有」和「我有內Lorem存有」分別 - 因此，他們會匹配。

String.prototype.toLowerCase() reference.

還要注意的是，在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，然後返回false如果是的indexOf否則-1將返回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>