Jquery Search - Case insensitive.. How i was ignore

Question

The trouble is, if there is the word “Nabeel” with an upper case “N” and I search “n”, it wont find it. How can I make this script case insensitive?

$("#search-criteria").on("keyup", function() {
  var g = $(this).val();
  $("a.recent_views.mainserach span.font").each(function() {
    var s = $(this).text();
    if (s.indexOf(g) != -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input type="search" id="search-criteria" placeholder="Enter name………">

<a class="recent_views mainserach" href=""><br>
  <span class="font">Nabeel</span><br>
  <span class="font">Ali</span><br>
  <span class="font">Faisal</span><br>
</a>

score 1 · Accepted Answer · answered Jun 03 '17 at 08:15

Try this.

Make them to Lower case then search

$("#search-criteria").on("keyup", function() {
  var g = $(this).val().toLowerCase();
  $("a.recent_views.mainserach span.font").each(function() {
    var s = $(this).text().toLowerCase();
    if (s.indexOf(g) != -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input type="search" id="search-criteria" placeholder="Enter name………">
<a class="recent_views mainserach" href=""><br>
  <span class="font">Nabeel</span><br>
  <span class="font">Ali</span><br>
  <span class="font">Faisal</span><br>
</a>

score 0 · Answer 2 · answered Jun 03 '17 at 08:18

0

use

s.substring(0, 1).toUpperCase()

answered Jun 03 '17 at 08:18

Raj

45
6

score 0 · Answer 3 · answered Jun 03 '17 at 08:26

Simply do with contains() jquery function .its better with index match .And case insensitive match

$("#search-criteria").on("keyup", function() {
  var val = $(this).val()
  if (val) {
    $("a.recent_views.mainserach span.font").hide()
    $("a.recent_views.mainserach span.font:contains(" + val + ")").show()
  } else {
    $("a.recent_views.mainserach span.font").show()
  }
})

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<input type="search" id="search-criteria" placeholder="Enter name………">

<a class="recent_views mainserach" href=""><br>
  <span class="font">Nabeel</span><br>
  <span class="font">Ali</span><br>
  <span class="font">Faisal</span><br>
</a>

Jquery Search - Case insensitive.. How i was ignore

3 Answers3