如何使我的搜索表单使用大写和小写答案

【问题标题】：How can I make my search form work with uppercase and lowercase如何使我的搜索表单使用大写和小写
【发布时间】：2017-09-20 19:11:29
【问题描述】：

我希望我的搜索表单可以使用大写和小写。因此，每当我输入小写的内容时，它也会在我正在搜索的表中显示大写结果。

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

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript uppercase lowercase search-form

【解决方案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”和“我有 lorem ipsum”——因此，它们会匹配。

String.prototype.toLowerCase() reference.

另请注意，在 ES6 中，您有 String.prototype.includes() 可能用于您正在做的事情。它读起来会更好一些 - 但目前 IE 不支持它。

【讨论】：

谢谢！完美运行！
是的，我意识到了。我评论到快，对不起！但现在可以了。
@robindehaan 很高兴它做到了。如果你接受我的回答，我会顺便越过20k分！ :D

【解决方案2】：

如果你想忽略大小写，可能你应该把两边都设为大写或小写。

在您的情况下，您可以在rowData 和searchText 上使用toUpperCase() 或toLowerCase()。

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

【讨论】：

【解决方案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>

【讨论】：