jquery - jquery中是否有任何功能我可以搜索子元素文本并通过搜索键过滤所有子元素？

Question

例如我的 html 如下所示，

<div id="mainDiv">
   <div id="1">This is animal page</div>
   <div id="2">No animal here</div>
   <div id="3">Jame Bond</div>
   <div id="4">Simple Bond</div>
</div>

我有一个input像这样的领域

<input type="text" id="search">

在搜索任何内容时，它必须在其他 div 中列出结果。

就像我搜索keyword bond它时应该显示如下

<div id="mainDiv">
   <div id="3">Jame Bond</div>
   <div id="4">Simple Bond</div>
</div>

Answer 1

您可以使用.filter()并制作一个简单的过滤功能：

var search_string = 'bond';
var $matched = $('#mainDiv > div').filter(function() {
    return $(this).text().toLowerCase().indexOf(search_string) !== -1;
});

Answer 2

Blender的回答更进一步，试试这个

<input type="text" id="search" onkeyup="search(this.value);">
  <div id="mainDiv">
     <div id="1">This is animal page</div>
     <div id="2">No animal here</div>
     <div id="3">Jame Bond</div>
     <div id="4">Simple Bond</div>
  </div>

<script type="text/javascript">
    function search(text) {
       var search_string = text;
       var all = $('#mainDiv > div');

       all.css({ "display": "none" });

       var $matched = $('#mainDiv > div').filter(function () {
          return $(this).text().toLowerCase().indexOf(search_string) !== -1;
       });

       $matched.css({ "display": "block" });
     }
</script>

演示链接：http: //jsbin.com/ocugug/1

Answer 3

试试这个

     $("#mainDiv div").hide();
     $("#mainDiv div:contains("+$("#search").val()+")").show(); 

演示