时间戳

首页 > 解决方案 > 在搜索表中为“主页”和“主页”提供相同的结果

javascript - 在搜索表中为“主页”和“主页”提供相同的结果

问题描述

这是一个搜索表，并且运行良好。但我希望这样写“主页”和这样的“主页”。在这两种情况下，它都会显示主页的结果。“关于我们”和“联系我们”的相似之处。

代码如下。请问谁能帮帮我

#myInput {
    
  padding: 12px 20px 12px 40px;
  border: 5px solid #ddd;
  margin-bottom: 12px;
  border-radius:20px;
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Search your product here">
<table id="myTable" align="center" border="5" width>
  <tr class="header">
    <th>Header 1 </th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td><center>

<br><b>Home page</b></a></center></td>
    <td>   </td>
  </tr>
  <tr>
    <td><center>
    
    <br><b>About us</b></a></center></td>
    <td>
    
    </td>
  </tr>
<tr>
    <td><center>
    
    <br><b>Contact us</b></a></center></td>
    <td>
    
    </td>
  </tr>
</table>


function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

标签： javascripthtmlcss

解决方案

使用正则表达式替换空格

filter = filter.replace(/\s/g, '')

编辑评论

filter = filter.replace(/\s/g,'')
txtValue = txtValue.replace(/\s/g, '')
if (txtValue.toUpperCase().indexOf(filter) > -1) {
  tr[i].style.display = "";    
} else {
  tr[i].style.display = "none";
}

推荐阅读