var item = $('.item'); $('input').keyup(function() { var valThis = $(this).val().toLowerCase(); if (valThis == '') { $(item).show(); } else { $(item).each(function() { var text = accentsTidy($(this).text().toLowerCase()); var match = text.indexOf(valThis); if (match >= 0) { $(this).show(); } else { $(this).hide(); } }); }; }); accentsTidy = function(s) { var map = [ ["\\s", ""], ["[àáâãäå]", "a"], ["æ", "ae"], ["ç", "c"], ["[èéêë]", "e"], ["[ìíîï]", "i"], ["ñ", "n"], ["[òóôõö]", "o"], ["œ", "oe"], ["[ùúûü]", "u"], ["[ýÿ]", "y"], ["\\W", ""] ]; for (var i=0; i<map.length; ++i) { s = s.replace(new RegExp(map[i][0], "gi"), function(match) { if (match.toUpperCase() === match) { return map[i][1].toUpperCase(); } else { return map[i][1]; } }); } return s; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" placeholder="Search"> <div class="item"> <h3>Aminur Rashid</h3> </div> <div class="item"> <h3>Jîbrãn</h3> </div> <div class="item"> <h3>Maryäm</h3> </div> <div class="item"> <h3>Gülay Gül</h3> </div>