Search code examples
jqueryfilteruppercaselowercase

How to filter with jquery for upper- and lowercase?


I have a list with results contain Uppercases and Lowercases.

My problem is that I can't search in lowercases (type keywords in lowercase) It can't find any results.

This is the code for filtering a list using 1 input. I am using jquery for this:

<script language="javascript" type="text/javascript">
  function filter(element) {
    var value = $(element).val();

    $("#filtro_mod > ul > li").each(function() {
      if ($(this).text().search(value) > -1) {
          $(this).show();
      }
      else {
           $(this).hide();
      }
    });
  }
</script>
<html>
  <p>
    <label for="filtro">Filter by model:</label>
    <input id="filtro" name="filtro" type="text" onkeyup="filter(this)" />
  </p>
  <div id="filtro_mod">
    <ul>
      <li><strong>145GB 10K Ultra320 SCSI Pluggable Hard Drive</strong></li>
      <li><strong>15 BL465c IB Cluster</strong></li>
      <li><strong>05370-xx1 DL380 G3 cluster</strong></li>
      <li><strong>AlphaServer GS320 Model 32</strong></li>
      <li><strong>AMD Opteron 254 2.8GHz SC E BL25p Processor Kit</strong></li>
    </ul>
  </div>
</html>

Solution

  • jsFiddle Demo

    Usually what you want to do is set both the value you are searching for and the text you are searching in to upper case.

    var value = $(element).val().toUpperCase();//value you are looking for
    

    and later

    if ($(this).text().toUpperCase().search(value) > -1)//text you are searching in