使用实时输入进行Jquery搜索，例如Angular JS中的Filter选项
如何应用filter选项来跟踪将在给定的实时输入上检查和显示的 html代码。
Nick Sam John 示例：当用户在搜索框中键入nick时，只有
Nick
需要显示＆另外两个div需要隐藏。请任何人都可以建议一个好的方法。
即创建搜索结果，如https://docs.angularjs.org/api/ng/filter/filter
我添加了oninput事件它将检查并显示给定的实时输入 。 区分大小写 。时间字符串为空 。它不显示任何内容。它将搜索包含在结果中的每个字母
用的更新答案
区分大小写选择： 参见参考
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(); });
Nick Sam John
您可以分别使用contains和hide / show来检查div的内容
$(function() { $("#search").on('change', function(event) { var text = $(this).val(); $('.answer:contains(' + text + ')').show(); $('.answer:not(:contains(' + text + '))').hide(); }); });
Nick Sam John
在Geeky的代码之上构建，你可以只做一个不区分大小写：包含可以进行不区分大小写检查的选择器。
$.expr[':'].caseInsensitiveContains = function(a, i, m) { return jQuery(a).text().toLowerCase() .indexOf(m[3].toLowerCase()) >= 0; }; $(function() { $("#search").on('keyup', function(event) { var text = $(this).val().trim(); if (text === "") { $(".answer").show(); } else { $('.answer:caseInsensitiveContains(' + text + ')').show(); $('.answer:not(:caseInsensitiveContains(' + text + '))').hide(); } }); });
Nick Sam John
您可以使用jQuery change()方法并检查输入值，然后显示或隐藏相应的div。
试试这个：
$(function() { $("#search").on('change', function(event) { var text = $(this).val().toLowerCase(); if(text.length){ $('.answer').each(function(){ if($(this).text().toLowerCase() == text) { $(this).show(); } else $(this).hide(); }) } else $('.answer').show(); }); });
Nick Sam John
给所有div的id然后尝试这个
然后在昵称点击事件下面写代码
$('#div2').css("display", "none"); $('#div3').css("display", "none");