0

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

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

谁能帮我这个？

4

3 回答 3

2

更改此行：

 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()参考。

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

于 2017-04-24T07:45:04.547 回答
0

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

在您的情况下，您可以使用toUpperCase()or toLowerCase()on rowDataand searchText。

var upperData = rowData.toUppercase();
var upperText = searchText.toUppercase();
if (upperData.indexOf(upperText) == -1) {
  //Not Found
}
else {
  //Found
}
于 2017-04-24T07:52:05.303 回答
0

这是另一种选择：

诀窍是使比较同质化。

这种同质化怎么做？

  • 只需转换元素以比较相同的类型。
  • 但它们是字符串，是的，但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>

于 2017-04-24T08:20:24.380 回答