I want to show only divs that contains the entered search values.So if I type upload login in the Searchbox it should show only Question 1 and Question 3.Note: It should work with multiple search input values(like in the example: should search for value upload AND login and show the divs which contains this values).Note 2: It should also show Question 1 and Question 3 if the search input is like this: upl logNote 3: Not case sensitiv. So upload should filter the div(Question 1) with content Upload.This is what i got: <section id="content"><div id="search-block"> <input type="text" id="inpSearch" placeholder="Search.." /></div><div> <div class="wrapper"> <h1>Question 1</h1> <p>Harry Markus Upload</p> </div></div><div> <div class="wrapper"> <h1>Question 2</h1> <p>Registration Append August Download</p> </div></div><div> <div class="wrapper"> <h1>Question 3</h1> <p>Login July Dad</p> </div></div>$('#inpSearch').keyup(function(){ var sSearch = this.value; $('section#content > div:not(:first-child)').hide(); $('section#content > div:contains("' + sSearch + '"):not(:first-child)').show();}); 解决方案 Here you have two problems.You need to use case insensitive jQuery :contains selector. For eg: If you search for upload or Upload it should fetch results.CODE: jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; jQuery.expr[':'].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; };SOURCE: Is there a case insensitive jQuery :contains selector?2.Split the search string and parse using .each like:CODE: $('#inpSearch').keyup(function(){ var sSearch = this.value; sSearch = sSearch.split(" "); $('section#content > div:not(:first-child)').hide(); $.each(sSearch, function(i){ $('section#content > div:contains("' + sSearch[i] + '"):not(:first-child)').show(); });});DEMO FIDDLE 这篇关于jQuery:仅显示包含搜索值的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-01 11:33
查看更多