在 html 中搜索单词并使用 jQuery 显示特定内容答案

【问题标题】：Search word in html and show specific content using jQuery在 html 中搜索单词并使用 jQuery 显示特定内容
【发布时间】：2020-02-27 20:59:54
【问题描述】：

我正在尝试使用 jQuery 构建搜索过滤器。首先，我使用$(list).find('p').hide(); 隐藏了 html 的所有内容。

我想要做的是当用户在文本框中输入文本时，它应该在 html 中找到该词，如果找到它应该在 its<div> 中显示整个内容。我不知道我做错了什么？这里是JSFiddle

<!DOCTYPE html>
<html>
<head>
    <title>Some Title</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script> 

(function ($) {
    jQuery.expr[':'].Contains = function(a,i,m){
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
    };
    function listFilter(header, list) {
        $(list).find('p').hide();
        var form = $("<form>").attr({"class":"filterform","action":"#"}),
            input = $("<input>").attr({"class":"filterinput","type":"text"}),
            search = $("<input>").attr({"class":"filterbutton","type":"button","name":"btn1","value":"Search"});
        $(form).append(input).appendTo(header);

        $(input)
            .change( function () {
                var filter = $(this).val();
                if(filter) {
                    $(list).find("p:contains("+filter+")").closest("div").show();
                } else {
                    $(list).find('p').hide();
                }
                return false;
            })
            .keyup( function () {
                $(this).change();
            });
    }

    $(document).ready(function () {
        listFilter($("#header"), $("#list"));
    });
}(jQuery));
 </script>
</head>
<body>
<h1 id="header">Collection</h1>
<div id="list">

<div id='p1'>
<p>First Paragraph</p>
<p>Abbot and Costello - Africa Screams</p>
</div>

<div id='p2'>
<p>Second Paragraph</p>
<p>Abbot and Costello - Frank/Meet</p>
</div>

<div id='p3'>
<p>Third Paragraph</p>
<p>addin</p>
</div>

<div id='p4'>
<p>Forth Paragraph</p>
<p>Begins</p>
</div>

</div>
</body>
</html>

显然我想使用按钮单击而不是文本更改事件来实现这一点。我正在尝试动态创建按钮

search = $("<input>").attr({"class":"filterbutton","type":"button","name":"btn1","value":"Search"});

【问题讨论】：

标签： jquery html filter

【解决方案1】：

Working Fiddle.

你是如此接近，你只需要做两个小改动：

您需要使用刚刚在脚本开头创建的表达式:Contains，因此p:contains 应该是p:Contains：
```
$(list).find("p:Contains("+filter+")")
```
您应该在匹配时显示段落 p 而不是父 div，因此只需替换：
```
selector.closest("div").show();
```
作者：
```
selector.show();
```

问题所在的整行应该是：

$(list).find("p:Contains("+filter+")").show();

希望这会有所帮助。

注意：我建议在执行匹配之前始终隐藏段落，然后不需要else 子句，我还建议使用input 而不是change/keyup 事件.

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };
  
  function listFilter(header, list) {
    $(list).find('p').hide();
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"}),
        search = $("<input>").attr({"class":"filterbutton","type":"button","name":"btn1","value":"Search"});
        
    $(form).append(input).appendTo(header);

    $(input).on('input', function () {
      var filter = $(this).val();
      
      $(list).find('p').hide();
      
      if(filter) {
        $(list).find("p:Contains("+filter+")").show();
      }
    });
  }

  $(document).ready(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="header">Collection</h1>

<div id="list">
  <div id='p1'>
    <p>First Paragraph</p>
    <p>Abbot and Costello - Africa Screams</p>
  </div>

  <div id='p2'>
    <p>Second Paragraph</p>
    <p>Abbot and Costello - Frank/Meet</p>
  </div>

  <div id='p3'>
    <p>Third Paragraph</p>
    <p>addin</p>
  </div>

  <div id='p4'>
    <p>Forth Paragraph</p>
    <p>Begins</p>
  </div>
</div>

【讨论】：

谢谢，您似乎找到了问题所在，并且您建议在执行匹配之前始终隐藏段落也有所帮助。