搜索包含指定文本的div [英] Search for divs that contain specified text
问题描述
我想在我的网站上做一个搜索功能，在那里我搜索divs（并且留下不满足我搜索的divs。div列表如下所示：
< body>
< div class ='subjects'>
< div id ='subject'> / div>
< div id ='subject'> dancing< / div>
< div id ='subject'> soap< / div>
< / div>
< / body>
例如，当我搜索's'不显示内部跳舞的div，当你写soa时，它只显示肥皂（不移除div不匹配，只是不显示它们）。
我真的没有搜索的经验，所以所有的信息是欢迎的。
ps。我添加的标签是可用的语言，如果我需要一个扩展：这是没有问题的。
您可以使用 jQuery 像这样：
HTML ：
< div class ='subjects'>
< div>足球< / div>
< div> dancing< / div>
< div> soap< / div>
< / div>
< input type =textid ='search'/>
jQuery ：
$（'＃search'）。on（'input'，function（）{
var text = $（this）.val（）;
$（'。subjects div'）。show（）;
$（'。subjects div：not（：contains（'+ text +'））'）hide（）;
}
I want to make a search function on my website, where I search for divs (and leave out the divs which didn't meet what I searched for. The div list looks like this:
<body> <div class='subjects'> <div id='subject'>soccer</div> <div id='subject'>dancing</div> <div id='subject'>soap</div> </div> </body>For instance, when I search for the 's' it doesn't show the div which the dancing inside and when you write 'soa' it shows soap only (not removing divs not matching, just don't show them).
I really have no experience with searching stuff, so all information is welcome.
ps. the tags I added are the languages that are available, if I need an extension: that's no problem.
解决方案You can use
jQueryto do it, something like this:HTML:
<div class='subjects'> <div>soccer</div> <div>dancing</div> <div>soap</div> </div> <input type="text" id='search' />jQuery:
$('#search').on('input', function(){ var text = $(this).val(); $('.subjects div').show(); $('.subjects div:not(:contains(' + text + '))').hide(); });这篇关于搜索包含指定文本的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
