javascript - 搜索包含指定文本的 div

标签 javascript jquery html css

我想在我的网站上做一个搜索功能,在那里我搜索 div(并忽略不符合我搜索内容的 div。div 列表如下所示:

<body>
<div class='subjects'>
    <div id='subject'>soccer</div>
    <div id='subject'>dancing</div>
    <div id='subject'>soap</div>
</div>
</body>

例如,当我搜索“s”时,它不显示里面跳舞的 div,而当你写“soa”时,它只显示肥皂(不删除不匹配的 div,只是不显示它们) .

我真的没有搜索东西的经验,所以欢迎提供所有信息。

附言。我添加的标签是可用的语言,如果我需要扩展:没问题。

最佳答案

你可以使用 jQuery 来做,像这样:

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();
});

Fiddle

关于javascript - 搜索包含指定文本的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19078526/

相关文章:

javascript - 使用 PHP echos 编写 JavaScript 代码(用于传单 map 点)

javascript - 将 requirejs 与 retinajs 一起使用

javascript - 单击以使用 javascript 按 id 显示多个元素引用

html - 扩展 div 以适应 IE 6 和 7 中的固定宽度内容

html - 鼠标悬停时 Chrome 中的背景变化

javascript - Jquery 用户界面对话框

javascript - jquerymobile - 带有折叠的列表项上的复选框 - 避免展开/收缩操作

javascript - 隐藏和整个表单元素

javascript - jQuery 绑定(bind)事件处理程序

JavaScript RegExp #hasgtag 替换为 html 中没有超哈希链接的链接