Question

我有一个很大的H4部分，它由几个隐藏的LI组成，一旦用户单击H4，列表就会展开。现在，这总体上很好用。但是，我想实现一个搜索过滤器，以使用户能够按标题搜索一本书（例如）。在隐藏所有列表之前，过滤器功能运行良好。

function section(el){
  el.classList.toggle('on');
}


$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#section1,section2,section3 *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

#section1 .list, #section2 .list
{max-height:0vw; background:rgba(80,80,80,0.9); width:80%; float:left; list-style-type:none; margin:0% 0% 1% 7%; border-radius:10px; transition:0.2s ease-in-out; opacity:0; transform:translate3d(0px, 20px, 0px); overflow:hidden; }



#section1 .part.on ~ .list, #section2 .part.on ~ .list,#section3 .psg.on ~ .list
{max-height:100vw; opacity:1; transform:translate3d(0px, 0px, 0px); transition:0.2s ease-in-out; margin:0.0% 0% 5% 7%; overflow:auto; box-shadow:0px 0px 11px rgba(100,100,100,0.5);}


.list li{background:rgba(55,55,55,1); width:98%; margin:2% 0% 2% 0%; float:left; border-radius:5px; display:block; transition:0.1s; }
. list li a{ transition:0.1s; color:white; float:right; text-decoration:none; background:rgba(0,150,0,1); width:20%; height:50%; margin:1% 1% 1% 0%; padding:1% 1% 1% 1%; font-weight:bold; border-radius:10px; text-align:center; font-size:0.9vw; }
. list li p{text-align:center; width:65%; height:auto; margin:1% 0% 1% 1%; padding:0.5% 0.5% 0.5% 0.5%; font-weight:bold; color:rgba(220,220,220,1); float:left; font-size:0.9vw;}
. list li h5{float:left; width:15%; height:auto; text-align:center; font-size:0.9vw; margin:1% 0% 0% 0%; color:rgba(200,200,200,1);}
. list li h6{float:right; width:15%; height:auto; text-align:center; font-size:0.9vw; margin:0.5% 0% 0% 0%;  color:rgba(220,220,220,1); padding:0.3% 0.3% 0.3% 0.3%;}
. list li:nth-child(even){background:rgba(65,65,65,1); color:rgba(230,230,230,1);}
. list li:hover{background:rgba(100,100,100,0.9); color:white;}
. list li:hover p{color:white;}
. list li:hover h5{color:white;}
. list li:hover h6{color:white;}
. list li a:hover{background:rgba(0,100,0,1);}

.part{width:20%; height:1vw; padding:1% 0% 1% 0%; float:left; background:rgba(50,50,50,1); display:block; margin:0% 0% 0% 40%; overflow:hidden; text-align:center; border-radius:5px; border:1px solid rgba(70,70,70,1); transition:0.15s; user-select:none; color:rgba(200,200,200,1); font-size:0.9vw;}
.part:hover{color:white; background:rgba(70,70,70,1); border:1px solid rgba(150,150,150,0.7);}
.part:active{color:white; background:rgba(40,40,40,1); border:1px solid rgba(0,0,0,0.7); transition:0s; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="bar"> 
    <input type="search" placeholder="Search" id="myInput" onkeyup="myFunction()"></input>
</div>

<h2>title</h2>

<div id="section1">
  <h4 class="part" onclick="sections(this)">Book title 1</h4>
<div class="list">
  <ul>
    <div id="title"><p>Test1</p></div> 
      <li >
          <h5>Price:</h5>
            <p>Title</p>
              <h6>Date:</h6>
                  </li> 
<li>  
    <h5>price:</h5>
      <p>Title</p>
        <h6>Date:</h6>
          <a href="Books/book.pdf" download="test.pdf">Download sample</a>
</li> 
</ul>
</div>
</div> 
</div>


<div id="section2">
  <h4 class="part" onclick="sections(this)">Book title 2</h4>
    <div class="list">
      <ul>
        <div id="title">
          <p>Test1</p>
</div> 
<li>
  <h5>Price:</h5>
    <p>Title</p>
      <h6>Date:</h6>
</li> 
<li>
  <h5>price:</h5>
    <p>Title</p>
      <h6>Date:</h6>
        <a href="Books/book.pdf" download="test.pdf">Download sample</a>
</li> 
</ul>
</div>
</div> 
</div>

<div id="section3">
  <h4 class="part" onclick="sections(this)">Book title 3
</h4>
  <div class="list">
  <ul>
<div id="title">
  <p>Test1</p>
</div> 
<li>
  <h5>Price:</h5>
    <p>Title</p>
      <h6>Date:</h6>
        <a href="Books/book.pdf" download="test.pdf">Download sample</a>
</li> 
<li>
  <h5>price:</h5> 
    <p>Title</p>
      <h6>Date:</h6>
</li> 
</ul>
</div>
</div> 
</div>
</body>

如何过滤隐藏列表并显示结果？

0 个答案: