Question

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

我想要做的是当用户在文本框中输入文本时，它应该在html中找到该单词，如果找到它应该在其<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"});

Answer 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>

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

1 个答案: