使搜索框不区分大小写[重复]答案

【问题标题】：make a search box case insensitive [duplicate]使搜索框不区分大小写[重复]
【发布时间】：2019-08-02 06:26:39
【问题描述】：

$('#asearch').on('input', function(){
	let a = $(this).val();
	$('.title').hide();
	$('.title:contains(' + a + ')').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = 'search' class='asearch' id='asearch' placeholder='Search'>
<div class='title'>loRem</div>
<div class='title'>IpsuM</div>

如果在搜索框中输入lor，我希望第一个标题可见，如果输入i，我希望第二个标题可见，即希望搜索框不区分大小写。

有什么帮助吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

:contains 在 jquery 中的选择器是 case sensitive。您可以将正则表达式与filter()一起使用

$('#asearch').on('input', function() {
  let a = $(this).val();
  $('.title').hide();
  $('.title').filter(function() {
    return new RegExp(a, 'i').test($(this).text())
  }).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='search' class='asearch' id='asearch' placeholder='Search'>
<div class='title'>loRem</div>
<div class='title'>IpsuM</div>

【讨论】：

【解决方案2】：

您可以将 .contains 过滤器修改为不区分大小写或创建自己的选择器。

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


$('#asearch').on('input', function(){
	let a = $(this).val();
	$('.title').hide();
	$('.title:contains(' + a + ')').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = 'search' class='asearch' id='asearch' placeholder='Search'>
<div class='title'>loRem</div>
<div class='title'>IpsuM</div>

【讨论】：