时间戳

首页 > 解决方案 > 如何在快速搜索中删除区分大小写？`

javascript - 如何在快速搜索中删除区分大小写？`

问题描述

$(document).ready(function() {
  $("#SearchData li").hide();

  $('#SearchData li').each(function(i) {
    $(this).attr('data-text', function() {
      return $(this).text();
    });
  });

  $('#quickSearchInput').bind('change keypress  keyup change', function() {
    $("#SearchData li").hide();
    $('#SearchData li[data-text*="' + $.trim($(this).val()) + '"]').show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="quickSearchInput" />
<ul id="SearchData">
  <li>ABC</li>
  <li>DCD</li>
  <li>AFG</li>
  <li>XYZ</li>
  <li>abC</li>
  <li>xYz</li>
</ul>

当我尝试根据区分大小写来搜索 Jquery 搜索时.. 我怎样才能使其不区分大小写以快速搜索

谢谢

标签： javascriptjquery

解决方案

将两者转换options为searchString相同的情况。您可以使用toUpperCase()或toLowerCase()

$(document).ready(function() {
  $("#SearchData li").hide();

  $('#SearchData li').each(function(i) {
    $(this).attr('data-text', function() {
      return $(this).text().toLowerCase();
    });
  });

  $('#quickSearchInput').bind('change keypress  keyup change', function() {
    $("#SearchData li").hide();
    $('#SearchData li[data-text*="' + $.trim($(this).val().toLowerCase()) + '"]').show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="quickSearchInput" />
<ul id="SearchData">
  <li>ABC</li>
  <li>DCD</li>
  <li>AFG</li>
  <li>XYZ</li>
  <li>abC</li>
  <li>xYz</li>
</ul>

推荐阅读