[英]How to create case-insensitive text search
I have a search function that works perfectly for my application except that I can't figure out how to make it case-insensitive. 我有一个非常适合我的应用程序的搜索功能,除了我不知道如何使它不区分大小写。 Here is an example of some HTML:
这是一些HTML的示例:
<div id='search_count'>
<div id='count'><?php get_count('notes', 'tasks') ?>
</div>
<input type="text" id='search_notes' placeholder='Search'/>
</div>
<div class='task'>
301 closet
</div>
<div class='notes'>
<p>The old manager opened a panel that needs to be closed.</p>
</div>
<div class='task'>vacuum halls </div>
<div class='notes'><p>The halls need to be vacuumed every week!</p></div>
This JavaScript will filter the divs with class='notes' just like I want, but only case-sensitive. 就像我想要的那样,此JavaScript将使用class ='notes'过滤div,但仅区分大小写。 How can I do this case-insensitive?
我该如何区分大小写?
$("#search_notes").keyup(function () {
var search_notes = $(this).val();
$('.task, .notes').css('display', 'none');
$("div.notes:contains(" + search_notes + ")")
.css('display', 'block')
.prev().css('display', 'block');
var count = $('div.notes').filter(function () {
return $(this).css('display') !== 'none';
}).length;
$('#count').text(count);
});
You have to test both lowercased values against each other using toLowerCase() method: 您必须使用toLowerCase()方法对两个小写的值进行测试:
var search_notes = $(this).val().toLowerCase();
$('.task, .notes').css('display', 'none');
$('div.notes').filter(function() {
return $(this).text().toLowerCase() === search_notes;
}).forEach(function() {
$(this)
.css('display', 'block')
.prev()
.css('display', 'block');
});
var count = $('div.notes').filter(function() {
return $(this).css('display') !== 'none';
}).length;
$('#count').text(count);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.