I have the following code:
When performing a search on " buscaLugares
" , it finds the corresponding word for me perfectly, but only if I type it correctly. That is, if I write "sand"<-- it does not find me, but if I write "Sand"<-- yes, I would like to know or have an idea of how to achieve this match
, regardless of whether I write in uppercase or lowercase.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="buscaLugares" class="form-control" style="background:#5ba800;margin:5px" placeholder="Buscar Especialidad">
<ul class="classUl" id="GetbuscaLugares">
<li>Arena</li>
<li>Sol</li>
<li>Playa</li>
</ul>
<script>
$( function() {
$( '#buscaLugares').keyup( function() {
var bEspec = document.getElementById("buscaLugares").value;
var matches = $( 'ul#GetbuscaLugares' ).find( 'li:contains('+ bEspec +') ' );
$( 'li', 'ul#GetbuscaLugares' ).not( matches ).slideUp();
matches.slideDown();
});
});
</script>
The following code should work for you:
Tell me if everything is fine.
If you don't mind taking into account upper and lower case, help yourself with:
indexOf
and better to fully match each elementli
of the list. I modified your code so that you could see the result with what I mention.In addition, we deal
each
with jQuery which finds and iterates the elements that have a match with each other (in this case, we do an each to each li of the list#GetbuscaLugares
.: