如何让我的搜索表单使用大写和小写字母

Question

我希望我的搜索表单能够处理大写和小写。因此，每当我输入小写字母时，它也会在我正在搜索的 table 中显示大写结果。

这是我的 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)

这样，为了进行比较，您将只使用小写字符串。 IE。如果 searchText 是 "Lorem Ipsum" 而 rowData 是 "I HAVE LOREM IPSUM WITHIN"，它们将分别变为 "lorem ipsum" 和 "i have lorem ipsum within" - 因此，它们将匹配。

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() or toUpperCase()() 方法。

我创建了一个 notFound() 小写 rowData 和 searchText 然后 returns false 如果 indexOf 是 -1 否则会return true。抱歉，我花了很长时间才用国家和大洲填满 table。

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>

如何让我的搜索表单使用大写和小写字母

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

javascript

uppercase

lowercase

search-form