我如何才能执行“;查找“;函数

这可能是一个程序化的锤子，但它应该能做到：

如果不清楚发生了什么，请在jsFiddle上完整评论代码

$('#find').click(function(){
    var btn = $(this);
    btn.prop("disabled",true); 
    var term = $('#term').val(); 
    $('.collapse').collapse("hide"); 
    var rd = new RegExp('<span class="found">('+term+')<'/span>', "ig");
    $('#accordion2').html( $('#accordion2').html().replace(rd, '$1' ) ); 
    var occurences=[]; 
    $('#accordion2 .panel-body').each(function(i,e){ 
        var r = new RegExp('('+term+')', "ig"); 
        if( $(this).html().match(r) ){ 
            var matches = $(this).html().match(r); 
            $.each(matches, function(){ 
                occurences.push(i); 
            });
            $(this).html( $(this).html().replace(r, '<span class="found">$1</span>') );  
        }
    });
    var l =occurences.length; 
    var c = Number( $('#current').html() ); 
        c =  c > 0 ? c+1: 0;  
        c =  c > l ? 1 : c; 
        c =  c == 0 && l > 0 ? 1 : c ; 
    $('#count').html( l > 0 ? ' of '+ l : ' matches found in document');  
    $('#current').html( c ); 
    if(c != 0){
        $('#accordion2 .accordion-toggle').eq( occurences[c-1] ).click(); 
        $('.found').eq(c-1).focus();
    }
    setTimeout(function() { btn.prop("disabled",false); }, 1000); 
});
// reset everything if the user starts typing again
$('#term').keydown(function(){
    var term = $('#term').val(); 
    var rd = new RegExp('<span class="found">('+term+')<'/span>', "ig"); 
    $('#accordion2').html( $('#accordion2').html().replace(rd, '$1' ) ); 
    $('#count').html(''); // reset our labels
    $('#current').html('');
});

.found{
  background-color:yellow;
}
span{
    margin-left:15px;
    font-size:16px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<input type="text" id="term" value="cool" placeholder="search.."/><input type="button" id="find" value="Find"/><div id="labels"><span id="current"></span><span id="count"></span></div>
<div class="accordion" id="accordion2">
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Sample heading one
    </a>
  </h4>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph one</p>
  </div>
</div>  
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Sample heading two
    </a>
  </h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph two</p>
  </div>
</div>  
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
      Sample heading three
    </a>
  </h4>
</div>
<div id="collapseThree" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph one</p>
  </div>
</div>  
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
      Sample heading four
    </a>
  </h4>
</div>
<div id="collapseFour" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph two cool</p>
  </div>
</div>  
    
</div>

如果可以使用jquery，则可以使用:contains(my_string)伪选择器。以下是一个示例：http://jsfiddle.net/911d1zwk/

$("button").on("click", function(){
    var search = $("input").val();
    $("div.collapse").find(":contains('"+search+"')").parent().collapse("show");
});

这会获取您的搜索字符串，并找到它所在的可折叠div。这可以是多个div。然后它在正确的手风琴上触发Bootstrap的"展开"方法。希望这能有所帮助！

您可以在引导程序中尝试collapse（）函数来隐藏和显示手风琴。下面是一个工作示例。

 $(document).ready(function(){
 $('a.searchContent').on('click', function(){
	var q = $('input#input_search').val();
	searchFunction(q.toLowerCase());
 });
 });
 
   function searchFunction(s){
		console.log(s);
	$('.collapse').each(function(){
	  var divText = $(this).text();
	  console.log(divText.toLowerCase(), s);
	  if(divText.toLowerCase().indexOf(s) > -1){
		$(this).collapse('show'); 
	  }
	  if(divText.toLowerCase().indexOf(s) < -1){
		$(this).collapse('hide'); 
	  }
	});
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion2">
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Sample heading one 
    </a>
  </h4>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph one, Abc, xyz</p>
  </div>
</div>  
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Sample heading two
    </a>
  </h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph two, def, wxy</p>
  </div>
</div>  
</div>
<div><input type="text" name="search" id="input_search" /><br>
<a href="#" class="searchContent">Search!</a>
</div>