在折叠jQuery中显示结果

Question

我有我的HTML，这是一个包含几个面板的手风琴。我包括一个搜索框来搜索特定的面板。我能够搜索并找到结果。我很难显示崩溃的结果。最初，所有面板将处于折叠状态，搜索结果显示后，所有面板应位于（折叠位置）-显示完整的内容，而不仅仅是面板标题。

我的HTML：-

<div class="container" 
 id="page_container">
   <div id="accordion_search_bar_container">
  <input type="search" 
     id="accordion_search_bar" 
     placeholder="Search"/>
  </div>
  <div class="panel-group" 
   id="accordion" 
   role="tablist" 
   aria-multiselectable="true">
    <div class="panel panel-success" 
     id="collapseOne_container">
      <div class="panel-heading" 
       role="tab" 
       id="headingOne">
    <h4 class="panel-title">
      <a role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOne" 
         aria-expanded="true" 
         aria-controls="collapseOne">
        One
      </a>
    </h4>
  </div>
  <div id="collapseOne" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingOne">
    <div class="panel-body">
      <p>Pellentesque convallis dolor</p>
      <p>Enim at tincidunt magna dapibus vitae</p>
    </div>
  </div>
</div>
<div class="panel panel-primary" 
     id="collapseTwo_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingTwo">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseTwo" 
         aria-expanded="false" 
         aria-controls="collapseTwo">
        Two
      </a>
    </h4>
  </div>
  <div id="collapseTwo" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingTwo">
    <div class="panel-body">
      <p>Vestibulum in laoreet nisi</p>
      <p>Sit amet placerat massa</p>
    </div>
  </div>
</div>
<div class="panel panel-danger" 
     id="collapseThree_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingThree">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseThree" 
         aria-expanded="false" 
         aria-controls="collapseThree">
        Three
      </a>
    </h4>
  </div>
  <div id="collapseThree" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingThree">
        <div class="panel-body">
           <p>Curabitur sem eros tempor sit</p>
           <p>Amet nunc eget, gravida mollis</p>
        </div>
           </div>
        </div>
      </div>
   </div>

我的搜索用jQuery是

(function(){
    var searchTerm, panelContainerId;
    $.expr[':'].containsCaseInsensitive = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 
    0;
 };

 $('#accordion_search_bar').on('change keyup paste click', function () {
   searchTerm = $(this).val();
   $('#accordion > .panel').each(function () {
    panelContainerId = '#' + $(this).attr('id');
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
  $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
  ')').show();
   });
  });
  }());

对于搜索结果，我应该给出展开面板视图。

Show（）。崩溃；

有人可以帮我吗？

Answer 1

@Indu Velayutham，

在初始级别，所有面板均处于折叠模式。因此，$(".panel-collapse").css("display","none")在那里有页面加载，

现在，当您尝试搜索时，您会在搜索框中拥有一些价值，[即标题搜索已在您的情况下起作用]

因此，请按照逻辑进行说明，如果找到标题，则将 display:none CSS切换为 display:block ，这样可搜索面板内的所有内容均可见。

（仅供参考，此处没有给出用户是使用引导程序还是其他任何js的规范。因此，我只是基于基本的jquery basic :)给出我的答案）

尝试

(function(){
    $(".panel-collapse").css("display","none");
    var searchTerm, panelContainerId;
    $.expr[':'].containsCaseInsensitive = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 
    0;
 };

 $('#accordion_search_bar').on('change keyup paste click', function () {
   searchTerm = $(this).val();
  //
   $('#accordion > .panel').each(function () {
    panelContainerId = '#' + $(this).attr('id');
   
    if(searchTerm != "")
    {
      $(this).find(".panel-collapse").css("display","block");
    }
    else{
      $(this).find(".panel-collapse").css("display","none");
    }
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
     $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
    ')').show();
   });
  });
  }());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" 
 id="page_container">
   <div id="accordion_search_bar_container">
  <input type="search" 
     id="accordion_search_bar" 
     placeholder="Search"/>
  </div>
  <div class="panel-group" 
   id="accordion" 
   role="tablist" 
   aria-multiselectable="true">
    <div class="panel panel-success" 
     id="collapseOne_container">
      <div class="panel-heading" 
       role="tab" 
       id="headingOne">
    <h4 class="panel-title">
      <a role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOne" 
         aria-expanded="true" 
         aria-controls="collapseOne">
        One
      </a>
    </h4>
  </div>
  <div id="collapseOne" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingOne">
    <div class="panel-body">
      <p>Pellentesque convallis dolor</p>
      <p>Enim at tincidunt magna dapibus vitae</p>
    </div>
  </div>
</div>
<div class="panel panel-primary" 
     id="collapseTwo_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingTwo">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseTwo" 
         aria-expanded="false" 
         aria-controls="collapseTwo">
        Two
      </a>
    </h4>
  </div>
  <div id="collapseTwo" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingTwo">
    <div class="panel-body">
      <p>Vestibulum in laoreet nisi</p>
      <p>Sit amet placerat massa</p>
    </div>
  </div>
</div>
<div class="panel panel-danger" 
     id="collapseThree_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingThree">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseThree" 
         aria-expanded="false" 
         aria-controls="collapseThree">
        Three
      </a>
    </h4>
  </div>
  <div id="collapseThree" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingThree">
        <div class="panel-body">
           <p>Curabitur sem eros tempor sit</p>
           <p>Amet nunc eget, gravida mollis</p>
        </div>
           </div>
        </div>
      </div>
   </div>

让我知道这种情况对您有用吗？

Answer 2

尝试这样

(function(){
    var searchTerm, panelContainerId;
    $.expr[':'].containsCaseInsensitive = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 
    0;
 };

 $('#accordion_search_bar').on('change keyup paste click', function () {

   searchTerm = $(this).val();
   var textboxval =$("#accordion_search_bar").val();
   $('#accordion > .panel').each(function () {
    debugger;
    panelContainerId = '#' + $(this).attr('id');
    var BodyId=panelContainerId.split('_')[0];
    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + 
   '))').hide();
  $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + 
  ')').show();
  if(textboxval.length > 2){
  $(BodyId).css('display','block');
  }
  else{
  $(BodyId).css('display','none');
  }
   });
  });
  }());

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" 
 id="page_container">
   <div id="accordion_search_bar_container">
  <input type="search" class="form-control"
     id="accordion_search_bar" 
     placeholder="Search"/>
  </div>
  <div class="panel-group" 
   id="accordion" 
   role="tablist" 
   aria-multiselectable="true">
    <div class="panel panel-success" 
     id="collapseOne_container">
      <div class="panel-heading" 
       role="tab" 
       id="headingOne">
    <h4 class="panel-title">
      <a role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOne" 
         aria-expanded="true" 
         aria-controls="collapseOne">
        One
      </a>
    </h4>
  </div>
  <div id="collapseOne" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingOne">
    <div class="panel-body">
      <p>Pellentesque convallis dolor</p>
      <p>Enim at tincidunt magna dapibus vitae</p>
    </div>
  </div>
</div>
<div class="panel panel-primary" 
     id="collapseTwo_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingTwo">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseTwo" 
         aria-expanded="false" 
         aria-controls="collapseTwo">
        Two
      </a>
    </h4>
  </div>
  <div id="collapseTwo" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingTwo">
    <div class="panel-body">
      <p>Vestibulum in laoreet nisi</p>
      <p>Sit amet placerat massa</p>
    </div>
  </div>
</div>
<div class="panel panel-danger" 
     id="collapseThree_Container">
  <div class="panel-heading" 
       role="tab" 
       id="headingThree">
    <h4 class="panel-title">
      <a class="collapsed" 
         role="button" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseThree" 
         aria-expanded="false" 
         aria-controls="collapseThree">
        Three
      </a>
    </h4>
  </div>
  <div id="collapseThree" 
       class="panel-collapse collapse" 
       role="tabpanel" 
       aria-labelledby="headingThree">
        <div class="panel-body">
           <p>Curabitur sem eros tempor sit</p>
           <p>Amet nunc eget, gravida mollis</p>
        </div>
           </div>
        </div>
      </div>
   </div>