时间戳

首页 > 解决方案 > 使用提交按钮实时搜索

javascript - 使用提交按钮实时搜索

问题描述

我想使用 jquery 和一点香草 javascript 进行实时搜索，我尝试了以下代码：

HTML

<input type="text" id="myInput" placeholder="Type to search">
<button type="button" onclick="searchKey()">Serch</button>
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

JAVACRIPT

var $rows = $('#table tr');
function searchKey()
{
    var val = $.trim($('#myInput').val()).replace(/ +/g, ' ').toLowerCase();
    
    $rows.show().filter(function() {
        var text = $('#myInput').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
}

但是表格中的内容反而消失了，不起作用，但是当我为空时，再次点击提交，内容再次出现，我想适合搜索，例如“p”出来的内容有单击提交按钮时的字母“p”。我希望当我删除搜索输入时，表格中的所有内容立即再次出现，而无需单击提交按钮。

标签： javascripthtmljquerylivesearch

解决方案

如果文本存在于td使用中，您可以通过添加/删除 CSS 类来隐藏和显示元素hide

const rows = document.querySelectorAll("table tr");

function searchKey() {
  var val = $.trim($('#myInput').val()).replace(/ +/g, ' ').toLowerCase();
  
  rows.forEach(row => {
    const elements = [...row.children];
    if (!elements.some(el => el.textContent.toLowerCase().includes(val)))
      row.classList.add("hide");
    else row.classList.remove("hide");
  })
}
.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Type to search">
<button type="button" onclick="searchKey()">Search</button>
<table id="table">
  <tr>
    <td>Apple</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>Green</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Orange</td>
  </tr>
</table>

推荐阅读