使用提交按钮实时搜索

Question

我想使用 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();
}

而是table里面的内容消失了，不起作用，但是当我是空的时候，再点击提交，内容又出现了，我要适合搜索，例如“ p" 当我点击提交按钮时，会出现带有字母 "p" 的内容。我希望当我删除搜索输入时，table 中的所有内容立即再次出现，而无需单击提交按钮。

Answer 1

如果文本出现在 td 中，您可以隐藏和显示元素，使用 adding/removing CSS class 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>

Answer 2

I want when I delete the search input, all the contents in the table immediately appear again without clicking the submit button.

您可以为您的输入标签定义一个 input 侦听器。如果内容为空，运行 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>

使用提交按钮实时搜索

Search realtime with submit button

html

javascript

jquery

livesearch