使用提交按钮实时搜索答案

【问题标题】：Search realtime with submit button使用提交按钮实时搜索
【发布时间】：2021-11-09 06:37:13
【问题描述】：

我想使用 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”。我希望当我删除搜索输入时，表格中的所有内容立即再次出现，而无需单击提交按钮。

【问题讨论】：

标签： javascript html jquery livesearch

【解决方案1】：

如果文本存在于 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>

【讨论】：

【解决方案2】：

我希望当我删除搜索输入时，表格中的所有内容立即再次出现，而无需点击提交按钮。

您可以为您的输入标签定义一个input 侦听器。如果 Content 为空，则运行 searchKey 方法。

$('#myInput').on('input', function(e) {
  if(!e.target.value.length)
    searchKey();
});

完整的代码是：

var $rows = $('#table tr');

$('#myInput').on('input', function(e) {
  if(!e.target.value.length)
    searchKey();
});

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();
}

<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()">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>

【讨论】：