使用每个div中元素中的文本进行搜索过滤

Question

我找到了一个小提琴,它可以根据搜索框中使用的文本隐藏文本,但是无法弄清楚如何将此方法适用于包含多个元素的div.如何更改附加小提琴中的jQuery以使其过滤与输入的搜索匹配的div元素而不是列表项中找到的文本？

http://jsfiddle.net/point71echo/rof67uy6/2/

<input placeholder="Search Me" id="box" type="text" />

<ul class="navList">
    <li>apples</li>
    <li>apricots</li>
    <li>acai</li>
    <li>blueberry</li>
    <li>bananas</li>
    <li>cherry</li>
    <li>coconut</li>
    <li>donut</li>
    <li>durean</li>
</ul>


        <div class="connect-cat" catname="apples" style="visibility: visible; display: block;">
            <a href="/connect/apples">
                <div style="padding:5px;cursor:pointer;">
                    <div>
                        <img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apples">
                    </div>
                    <span>apples</span>
                </div>
            </a>
        </div>



        <div class="connect-cat" catname="apricots" style="visibility: visible; display: block;">
            <a href="/connect/apricots">
                <div style="padding:5px;cursor:pointer;">
                    <div>
                        <img width="60" class="cat-logo" src="http://t2.gstatic.com/images?q=tbn:ANd9GcS0rYdTsHK-IwuWCNA_xXq44v76dFH2wPc5wdErF9yWHty-wqY4Bg" alt="apricots">
                    </div>
                    <span>apricots</span>
                </div>
            </a>
        </div>

这是使用的jQuery:

$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis == ""){
        $('.navList > li').show();
    } else {
        $('.navList > li').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});

Answer 1

如果我需要在每个div框中添加另一个文本元素,是否有一种方法可以搜索每个div中的所有文本？这是一个附加文本元素的小提琴 - jsfiddle.net/point71echo/mttgj1tt/1 - point71echo

这是一个在本机JavaScript中一次搜索两个元素的解决方案,没有任何库.

document.getElementById("box").onkeyup=function(){
  var matcher = new RegExp(document.getElementById("box").value, "gi");
  for (var i=0;i<document.getElementsByClassName("connect-cat").length;i++) {
    if (
      matcher.test(document.getElementsByClassName("name")[i].innerHTML) || 
      matcher.test(document.getElementsByClassName("category")[i].innerHTML)
    ) {
      document.getElementsByClassName("connect-cat")[i].style.display="inline-block";
    } else {
      document.getElementsByClassName("connect-cat")[i].style.display="none";
    }
  }
}

JSFiddle

如果你想使用jQuery使它更具可读性(那些愚蠢的长DOM函数):

$("#box").on('keyup', function(){
  var matcher = new RegExp($(this).val(), 'gi');
  $('.connect-cat').show().not(function(){
      return matcher.test($(this).find('.name, .category').text())
  }).hide();
});

JSFiddle