过滤 <div> 与 <input type="checkbox"> 扩展和 <label>,<p> 文本内容答案

【问题标题】：Filter <div> with <input type="checkbox"> expandables and <label>,<p> text content过滤 <div> 与 <input type="checkbox"> 扩展和 <label>,<p> 文本内容
【发布时间】：2017-03-15 19:42:52
【问题描述】：

我一直试图找到一种方法，通过 div> 标签> 和 p> 中的文本内容过滤掉我的可扩展 div。我将把我的例子放在下面。我已经从以前的问题中尝试了一些 jquery 示例，但我似乎无法使其工作。我构建 div 的方式是通过单击适用的标签来展开 p> 内容>。我想要一个搜索框，可以过滤掉不包含搜索框中列出的文本的 div。

<html>
<head>
</head>
<body>
<style>
div {
position: relative;
}
input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
h3 {
font-size: large;
font-weight: 400;
color: #4a19ff;
margin: 20px 0 10px 0;
}
label {
cursor: pointer;
position: relative;
display: block;
padding-left: 20px;
font-family: 'Helvetica', 'Arial';
color: gray;
}
label:before {
display: none;
content: "";
position: absolute;
width: 0;
height: 0;
top: 40%;
left: 10px;
border-left: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-top: -8px;
}
input[type=checkbox]:checked ~ h2 label:before {
border-left: 8px solid transparent;
border-top: 8px solid black;
border-right: 8px solid transparent;
margin-left: -4px;
margin-top: -4px
}
input[type=checkbox]:checked ~ h3 ~ p {
max-height: 80%;
color: white;
}
</style>


<center>
<input type="text" id="example" placeholder="Search example..">
</center>
<div class="code">
<input type="checkbox" id="1">
    <h3>
        <label for="1">1 Expandables</label>
    </h3>
        <p class="content">
        This is an example of the expandables.
    </p>
</input>
</div>
<div class="code">
<input type="checkbox" id="2">
    <h3>
        <label for="2">2 Test</label>
    </h3>
        <p class="content">
        Can I do this?
        </p>
</input>
</div>
<div class="code">
<input type="checkbox" id="3">
    <h3>
        <label for="3">3 Apology</label>
    </h3>
        <p class="content">
        I am a noob at this and apologize if this is a basic request.          
    </p>
</input>
</div>
</body>
</html>

【问题讨论】：

标签： html search filter

【解决方案1】：

此脚本将从 id 和 name = "search" 的文本字段中获取值，然后将遍历文档正文中的所有 div 元素，如果这些 div 元素中的任何一个不包含输入到搜索框，它将其显示样式设置为“无”。

如果您想从文档中完全删除 div，您可以将 this.style.display="none" 行更改为 document.body.removeChild(this).

<html><head>
            <title>Title</title>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        </head>

    <body>
    <input type="text" name="search" id="search" value="">
    <button type="button" name="btnSearch" onclick="btnSearchOnClick()">Search</button>
    <script type="text/javascript">

        function btnSearchOnClick(){
            var searchTxt = document.getElementById("search").value; // get value from search input field
            if(searchTxt != ""){ // if there is input in search field
                $("div").each(function(){ // iterate through each div on page
                    var index = this.innerHTML.indexOf(searchTxt);
                    if(index == -1){
                        this.style.display = "none";
                    }
                });
            }
        }

    </script><div id="div0" style="display: none;">div0</div>
<div id="div1" style="display: none;">div1</div>
<div id="div2" style="display: none;">div2</div>
<div id="div3" style="display: none;">div3</div>
<div id="div4" style="display: none;">div4</div>
<div id="div5" style="display: none;">div5</div>
<div id="div6" style="display: none;">div6</div>
<div id="div7" style="display: none;">div7</div>
<div id="div8" style="display: none;">div8</div>
<div id="div9" style="display: none;">div9</div>

    </body></html>

编辑：这是您要求的新代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    </head>
<body>
<input type="text" name="searchbox" id="searchbox" />
<div id="div0">div0</div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div id="div9">div9</div>

<script type="text/javascript">

$("#searchbox").on("input", function(){
    var searchboxText = $("#searchbox").val();
    if(searchboxText != ""){
        $("div").each(function(){
           var divText = $(this).text();
           var index = divText.indexOf(searchboxText);
           if(index == -1){
               $(this).css("display", "none");
           }
           else{
               $(this).css("display", "block");
           }
        });
    }
    else{
        $("div").each(function(){
            $(this).css("display", "block");
        });
    }
});

</script>
</body>
</html>

【讨论】：

谢谢。我试试看。
我尝试了提供的脚本，它隐藏了所有 div，然后当我搜索其中包含的文本时它们不会出现。我想知道是否有一种方法可以让所有 div 在页面上可见，然后在我将文本输入到不在 div 中的搜索框中时开始隐藏它们。
我将使用适合我的新代码编辑帖子。