Jquery Accordion 过滤器

标签 jquery jquery-ui jquery-plugins accordion

我想过滤基于jquery中 Accordion 上的标题的输入文本,您能提到如何实现这一点吗?我尝试使用表格,但尽管根据输入进行过滤,但 Accordion 效果存在于行上。`

<div id="accordion">
   <forEach var="group" items="${groups}">
      <h3>
         <table class="order-table">
            <tr style="border-top: 0px;">
               <td>${group.seriesName}</td>
            </tr>
         </table>
      </h3>`enter code here`
      <div>Input text on expand</div>
   </forEach>
</div>

`

最佳答案

这是解决方案,

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script>$(function() {
             $( "#accordion" ).accordion({
                active: false,
                collapsible: true
            });
 });</script>

<script>
$(document).ready(function(){
  $("input").keyup(function(){
   var bla = $('#txt_name').val();
   $( "h3" ).each(function(){
        var htxt=$(this).text();
        alert(htxt);
        if (htxt.indexOf(bla) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
  });
});

</script>
</head>
<body>
<input type="text" id="txt_name"/>
<div id="accordion">
  <h3>Hi1</h3>
  <div>hello</div>
  <h3>Hi2</h3>
  <div>hello</div>
  <h3>Hi3</h3>
  <div>hello</div>

</div>
</body>
</html>

关于Jquery Accordion 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24841885/

相关文章:

javascript - div 拖在一起而不是分开

javascript - jQuery UI ToolTip 位置的奇怪行为

php - JQuery 用户界面 : How to use the progressbar to make a horizontal bar graph?

jquery globalcss IE 不透明度

javascript - 计算页面上的 javascript 函数数量(使用 javascript)

javascript - jQuery 销毁和创建计时器函数。怎么破坏?

jQuery/CSS 显示两列之间的合并样式关系,如 FileMerge

javascript - 汇总具有特定类名的所有文本框?

javascript - Jquery 问题 : How can I break up a multi-part form so that only one fieldset is visible at a time?

javascript - 在单个页面的多个位置使用时,JQuery 插件不起作用