Jquery手风琴滤波器_Jquery_Jquery Ui_Jquery Plugins_Accordion

Jquery手风琴滤波器

jquery jquery-ui jquery-plugins

Jquery手风琴滤波器,jquery,jquery-ui,jquery-plugins,accordion,Jquery,Jquery Ui,Jquery Plugins,Accordion,我想在jquery中过滤accordion上的输入文本标题，您能告诉我如何实现这一点吗？我尝试使用table，但行上存在accordion效果，尽管是根据输入过滤的` <div id="accordion"> <forEach var="group" items="${groups}"> <h3> <table class="order-table"> <tr style="bord

我想在jquery中过滤accordion上的输入文本标题，您能告诉我如何实现这一点吗？我尝试使用table，但行上存在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>


${group.seriesName}
`在这里输入代码`
在展开时输入文本

查看演示和

有关详细信息，请参见此处的解决方案

    <!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>


$（函数（）{
$（“手风琴”）。手风琴({
活动：错误，
可折叠：正确
});
});
$（文档）.ready（函数（）{
$（“输入”）.keyup（函数（）{
var bla=$（'#txt_name'）.val（）；
$（“h3”）。每个（函数（）{
var htxt=$（this.text（）；
警报（htxt）；
if（htxt.indexOf（bla）>-1）{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});
});
Hi1
你好
Hi2
你好
Hi3
你好

替代解决方案：

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
  $("#menu_filter_txt").keyup(function(){
   var bla = $('#menu_filter_txt').val().toString().toLowerCase();

   if (jQuery.trim(bla)=='') {
     $("#accordion div.ui-accordion-content").attr('filter-key','').hide(); 
     return true;
   }
   $( "#accordion ul li" ).each(function(){
        var htxt=$(this).text().toString().toLowerCase();   
      var ulIndex=$(this).parent().index('ul');
        if (htxt.indexOf(bla) > -1) {
            $(this).show();
            $('#ui-accordion-sis_accordion-panel-'+ulIndex).attr('filter-key',bla).show();
        } else {
            $(this).hide();
            if ($('#ui-accordion-sis_accordion-panel-'+ulIndex).attr('filter-key')!=bla)
            $('#ui-accordion-sis_accordion-panel-'+ulIndex).hide();
        }
    });
  });
});

</script>


$（文档）.ready（函数（）{
$（“#菜单_过滤器_txt”）.keyup（函数（）{
var bla=$（'#菜单_过滤器_txt'）.val（）.toString（）.toLowerCase（）；
if（jQuery.trim（bla）=''）{
$（“#accordion div.ui-accordion-content”）.attr（'filter-key'，''）.hide（）；
返回true；
}
$（“#手风琴ul li”）。每个（功能）{
var htxt=$（this.text（）.toString（）.toLowerCase（）；
var ulIndex=$（this.parent（）.index（'ul'）；
if（htxt.indexOf（bla）>-1）{
$（this.show（）；
$（'#ui-accordion-sis_accordion-panel-'+ulIndex）.attr（'filter-key'，bla）.show（）；
}否则{
$（this.hide（）；
if（$（'#ui-accordion-sis#u accordion-panel-'+ulIndex）.attr（'filter-key'）！=bla）
$（'#ui-accordion-sis_accordion-panel-'+ulIndex.hide（）；
}
});
});
});

我很感谢您的回复，但我想基于更新的代码进行过滤。这里基于标题进行过滤，而不应存在手风琴效果。这是一个非常好的解决方案，但当过滤掉扩展项时，会出现用户体验问题——内容div仍然存在。您可以避免在解决方案中使用

$（this）.next（）.hide（）

在

else

子句中显示内容div。。。但是，如果您坚持使用jqueryui的accordio，则需要弄清楚如何使

显示为关闭状态。另一方面，您可以使用使用jQuery但不使用jQuery UI的。您将能够轻松地自行解决该问题。干杯

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
  $("#menu_filter_txt").keyup(function(){
   var bla = $('#menu_filter_txt').val().toString().toLowerCase();

   if (jQuery.trim(bla)=='') {
     $("#accordion div.ui-accordion-content").attr('filter-key','').hide(); 
     return true;
   }
   $( "#accordion ul li" ).each(function(){
        var htxt=$(this).text().toString().toLowerCase();   
      var ulIndex=$(this).parent().index('ul');
        if (htxt.indexOf(bla) > -1) {
            $(this).show();
            $('#ui-accordion-sis_accordion-panel-'+ulIndex).attr('filter-key',bla).show();
        } else {
            $(this).hide();
            if ($('#ui-accordion-sis_accordion-panel-'+ulIndex).attr('filter-key')!=bla)
            $('#ui-accordion-sis_accordion-panel-'+ulIndex).hide();
        }
    });
  });
});

</script>