検索フォームを大文字と小文字で使用するにはどうすればいいですか

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 Ipsum」、rowDataが「I HAVE LOREM IPSUM WITHIN」だった場合、「lorem ipsum」と「lorem ipsum」となるため、一致します。

String.prototype.toLowerCase() reference.

はまたES6にあなたは何をやっているために使用される可能性がありますString.prototype.includes()を持っていることに注意してください。それは少し良くなるでしょう - しかしIEでは現時点ではサポートされていません。

Answer 2

大文字小文字を無視する場合は、大文字または小文字にする必要があります。

toUpperCase()またはtoLowerCase()をrowDataとsearchTextに使用することができます。

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

Answer 3

これは、代替です：

トリックは、比較を均質化です。

この均質化を行うにはどうすればよいですか？

• 要素を同じタイプと比較するように変換するだけです。
• しかし、それらは文字列ですが、Aはaとは異なります。したがって、すべて大文字または小文字のすべてを小文字にすることができます。しかし、どのように？
• toLowerCase()またはtoUpperCase()()の方法を使用します。

私はrowDataとsearchTextを小文字notFound()を作成し、その後のindexOfは、そうでない場合はtrueを返します-1ある場合falseを返します。申し訳ありません、国と大陸でテーブルを埋めるのに私は長い時間がかかりました。

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>