如何对以下 html 代码应用过滤选项这将检查并显示给定的实时输入。
<div class="block-parent">
<input type="text" name="search" class="search">
<div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
<div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
<div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>
</div>
示例：当用户在搜索框中输入 nick 时，仅<div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>需要显示，另外两个div需要隐藏。请任何人都可以建议一个好方法。
即创建一个搜索结果，例如https://docs.angularjs.org/api/ng/filter/filter https://docs.angularjs.org/api/ng/filter/filter
我添加了oninput事件 它将检查并显示在实时输入 given. 也区分大小写。当时字符串为空，不会显示任何事情。它的意志搜索包含在的每个字母 result
更新回答与
区分大小写选择：参见参考资料 https://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
$(document).on('input', '.search',function(event) {
var text = $(this).val();
$('.answer').hide();
$('.answer:Contains(' + text+ ')').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-parent">
<input type="text" name="search" class="search">
<div class="answer block1" style="color: white; background-color: rgb(98, 128, 145);">Nick</div>
<div class="answer block1" style="color: black; background-color: rgb(114, 139, 137);">Sam</div>
<div class="answer block1" style="color: white; background-color: rgb(123, 138, 115);">John</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
