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是＆＃34; Lorem Ipsum＆＃34;并且rowData是＆＃34;我已经拥有LOREM IPSUM＆＃34;，他们将成为＆＃34; lorem ipsum＆＃34;并且＆＃34;我在＆＃34;内有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()()方法。

我创建了notFound()小写rowData和searchText，如果indexOf为false则返回-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>

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

3 个答案: