HTML 和 JS 中的搜索栏

Question

我创建了一个 HTML table，里面有很多关于一个国家的信息。现在我希望用户能够在这个 table 中搜索像 Area 这样的信息。

function selectRow() {
  var input, filter, table, trs, td;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  table = document.getElementById("dataRows");
  trs = table.getElementsByTagName("tr");
  for (let index = 0; index < trs.length; index++) {
    td = trs[index].getElementsByTagName("td")[0];
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
      trs[index].display = "";
    } else {
      trs[index].display = "none";
    }
  }
}

<input type="text" id="search" onkeyup="selectRow()" placeholder="Search.." />

<table id="dataRows">
  <tr>
    <th>Attributes</th>
    <th>Value</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Australia</td>
  </tr>
  <tr>
    <td>Area</td>
    <td>7,741,220.00</td>
  </tr>
  <tr>
    <td>Population</td>
    <td>25,466,459</td>
  </tr>
</table>

但是当我尝试使用它时出现错误："Uncaught TypeError: Cannot read property 'innerHTML' of undefined" 我不明白为什么 td 是未定义的。

Answer 1

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

像这样使用你的代码以获得最佳结果并且没有任何错误

编辑

我认为这其中棘手的部分实际上是智能地接受用户输入。因此，我认为最好的办法是将搜索传递给自动完成类型的插件。页面准备就绪后，您将焦点传递到输入文本框，然后让插件在您搜索时施展魔法...

例如，您可以使用快速搜索插件。

然后给出 table 数据和如下输入：

<input id="searcher" type="text" name="searcher">

您可以准备一个如下所示的函数：

$('#searcher').quicksearch('table tbody tr', {
    'delay': 100,
    'bind': 'keyup keydown',
    'show': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        $(this).addClass('show');
    },
    'onAfter': function() {
        if ($('#searcher').val() === '') {
            return;
        }
        if ($('.show:first').length > 0){
            $('html,body').scrollTop($('.show:first').offset().top);
        }
    },
    'hide': function() {
        $(this).removeClass('show');
    },
    'prepareQuery': function(val) {
        return new RegExp(val, "i");
    },
    'testQuery': function(query, txt, _row) {
        return query.test(txt);
    }
});

$('#searcher').focus();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在这里试试：http://jsfiddle.net/ZLhAd/369/

Answer 2

我认为，首先要演示的最有帮助的是一种可以让您日后自行诊断的方法。这种困难将一直发生，所以这里有一种方法可以帮助您解决这类问题。

您知道 <td> 不是您期望的值，因此通过输出用于获取 <td> 的值来检查您的期望值。您可以通过在循环顶部添加这些 console.log 行来做到这一点：

for (let index = 0; index < trs.length; index++) {
  console.log("trs[index]",trs[index]);
  console.log("trs[index].getElementsByTagName(td)", trs[index].getElementsByTagName("td"));

这样，您应该看到第一个 <tr> 有 <th> 个元素，而不是 <td>！这些惊喜一直在发生，学习技巧以最快的方式检查您的假设是很棒的。

这是一个非常简单的解决方案，此块的第一行和最后一行在您的代码中是相同的：

for (let index = 0; index < trs.length; index++) {
    var tds = trs[index].getElementsByTagName("td");
    if(tds.length == 0) {
        continue;
    }
    td = tds[0];
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

看来您刚刚开始构建这个，希望对您有所帮助！

HTML 和 JS 中的搜索栏

Search Bar in HTML and JS

html

javascript

searchbar