0

我正在使用下面的 jscript 代码来过滤无序列表。我正在尝试<h3>在搜索时删除结果的标签。例如，如果搜索蝙蝠侠我当前的输出是

Action    
   Batman

Adventure

我需要删除标题冒险因为在这个类别下没有结果。

    <script type="text/javascript"> 
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };  
  function listFilter(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header); 
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();    
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();          
        } else {
          $(list).find("li").slideDown();
        }
      })
    .keyup( function () {
        $(this).change();
    });
  } 
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery)); 
  </script>

我的html是

<div id="wrap"> 
    <h1 id="header">DVD Collection<form class="filterform" action=""><input class="filterinput" type="text"></form></h1> 
    <h3>Action</h3>
    <ul id="list"> 
        <li><a href="#">Batman</a></li>
        <li style="display: list-item;"><a href="#">Star Trek (2009)</a></li> 
        <li style="display: list-item;"><a href="#">Tremors</a></li> 
    </ul> 
    <h3>Adventure</h3>
    <ul id="list">  
        <li style="display: list-item;"><a href="#">Ice Age</a></li> 
        <li style="display: list-item;"><a href="#">Avathar</a></li> 
    </ul> 

</div>
4

3 回答 3

1

她的代码已修改。完美运行。我也更改了 HTML。

HTML：

<div id="wrap"> 
<h1 id="header">DVD Collection</h1> 
<ul id="list">   
  <li>
<h3>Action</h3>
<ul>
    <li><a href="#">Batman</a></li>
    <li style="display: list-item;"><a href="#">Star Trek (2009)</a></li> 
    <li style="display: list-item;"><a href="#">Tremors</a></li> 
  <li style="display: list-item;"><a href="#">Amnts</a></li> 
  </ul>
  </li>
  <li>
<h3>Adventure</h3>
<ul>
    <li style="display: list-item;"><a href="#">Ice Age</a></li> 
    <li style="display: list-item;"><a href="#">Avathar</a></li> 
</ul> 
  </li>
  </ul>
</div>

Javascript：

(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };  
  function listFilter(header, list) {
    var form = $("<form>").attr({"class":"filterform","action":"#"}),
        input = $("<input>").attr({"class":"filterinput","type":"text"});
    $(form).append(input).appendTo(header); 
    $(input)
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(function(){$(list).find("ul").each(function(){
            console.log($(this).children("li:visible").length); if($(this).children("li:visible").length===0)$(this).parent().slideUp();
          });});    
          $(list).find("a:Contains(" + filter + ")").parent().slideDown();  

        } else {
          $(list).find("ul, li").slideDown();
        }
      })
    .keyup( function () {
        $(this).change();
    });
  } 
  $(function () {
    listFilter($("#header"), $("#list"));
  });
}(jQuery));

这是演示 http://jsbin.com/welcome/71807/

更新代码

添加li到列表

<li class="noresult">No Result Found</li>

CSS：

.noresult {
  display: none;
}

JS：slideUp 的另一个链式函数

function(){
              if($(list).find("ul:visible").length === 0)
                $(".noresult").show();
              else
                $(".noresult").hide();
            });

演示和完整代码在这里 http://jsbin.com/welcome/71862/

于 2013-01-09T05:58:40.180 回答
0

我在你的脚本中添加了一些东西。下面是整个脚本：

<script>
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
  return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

function listFilter(header, list) {
   var form = $("<form>").attr({"class":"filterform","action":"#"}),
   input = $("<input>").attr({"class":"filterinput","type":"text"});
   $(form).append(input).appendTo(header);

   $(input).change( function () {
    var filter = $(this).val();
    if(filter) {
      $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(function(){
          jQuery.each($(list).find('ul'),function(){
              if(!$(this).find('li:visible').length){
                 $(this).parent().slideUp();
              }
           });
      });
      $(list).find("a:Contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find("li").slideDown();
    }
    return false;
  })
.keyup( function () {
    $(this).change();
  });
  }

$(function () {
    listFilter($("#header"), $("#list"));
});
}(jQuery));

于 2013-01-09T05:36:52.493 回答
0

尝试将您的收藏放在 a 中<ul>，如下所示：

<div id="wrap"> 
<h1 id="header">DVD Collection<form class="filterform" action=""><input class="filterinput" type="text"></form></h1> 
<ul id="dvd-collections">
    <li>
        <h3>Action</h3>
        <ul id="list"> 
            <li><a href="#">Batman</a></li>
            <li style="display: list-item;"><a href="#">Star Trek (2009)</a></li> 
            <li style="display: list-item;"><a href="#">Tremors</a></li> 
        </ul>
    </li> 
    <li>
        <h3>Adventure</h3>
        <ul id="list">  
            <li style="display: list-item;"><a href="#">Ice Age</a></li> 
            <li style="display: list-item;"><a href="#">Avathar</a></li> 
        </ul> 
    </li>
</ul>

如果在你的脚本中没有结果ul[id=list]，slideUp它的parent li.

希望能帮助到你。

于 2013-01-09T05:01:54.087 回答