CODEWITHSUNDEEP
javascriptjquery
Taqi Raza Khan
Taqi Raza Khan

Reputation: 684

how to remove case sensitivty in quick search?`

$(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>

when i try to search the Jquery search according to case sensitive.. how can i make it case insenstive to search quickly

Thanks

Upvotes: 0

Views: 61

Answers (4)

Mister Jojo
Mister Jojo

Reputation: 22319

in JS:

const quickSearchInput = document.querySelector('#quick-Search-Input')
  ,   SearchDataElms   = document.querySelectorAll ('#Search-Data li')
  ;
quickSearchInput.oninput = e =>
  {
  let regTest = new RegExp( quickSearchInput.value, 'i')  // insensitive  case 

  SearchDataElms.forEach(el=>
    {
    el.style.display = regTest.test(el.textContent) ? 'list-item' : 'none'
    })
  }
<input type="text" id="quick-Search-Input" />
<ul id="Search-Data">
    <li>ABC</li>
    <li>DCD</li>
    <li>AFG</li>
    <li>XYZ</li>
    <li>abC</li>
    <li>xYz</li>
</ul>

Upvotes: 0

Mamun
Mamun

Reputation: 68943

You can use String.prototype.toLowerCase() to set the attribute value in lower case.

Please Note: As the data is shown on page load then goes hiden after page load, I will suggest you to hide them using CSS.

Also you should not use bind(), you can simply use on() with input.

$(document).ready(function() {

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

  $('#quickSearchInput').on('input', function() {
    $("#SearchData li").hide();
    $('#SearchData li[data-text*="' + $.trim($(this).val().toLowerCase()) + '"]').show();
  });
});
#SearchData li{
  display: none;
}
<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>

Upvotes: 1

fadzb
fadzb

Reputation: 459

Try to cast data-text strings to lower case using $(this).text().toLowerCase() and cast your jquery search parameter to lower case also: ...val().toLowerCase().

Didn’t test to make sure syntax is correct but concept should work.

Upvotes: 1

Sarun UK
Sarun UK

Reputation: 6746

Convert both options and searchString to same case. You can use toUpperCase() or 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>

Upvotes: 1

Related Questions