1

Tengo el siguiente código:

Al realizar una búsqueda en "buscaLugares" , este me busca la palabra correspondiente perfectamente, pero solo si lo escribo correctamente. Es decir si escribo "arena"<-- no me encuentra , pero si escribo "Arena"<-- si , quisiera saber o tener una idea de como poder lograr este match, sin importar si escribo en mayúscula o minúscula.

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

1
  • Puedes pasar la cadena al formato que tienen los li (primera letra mayuscula y lo demas minuscula): bEspec.charAt(0).toUpperCase() + bEspec.toLowerCase().slice(1)
    – x3k
    el 20 ene. 2020 a las 14:37

2 respuestas 2

3

El siguiente código debería funcionar para ti:

    <script type="text/javascript">
    $(function(){   
        $('input[type="text"]').keyup(function(){       
            var searchText = $(this).val().toUpperCase();
            $('.classUl > li').each(function(){
                var currentLiText = $(this).text().toUpperCase(),
                    showCurrentLi = currentLiText.indexOf(searchText) !== -1;
                $(this).toggle(showCurrentLi);
            });
        });
    });
    </script>

Me comentas si todo bien.

1
  • 1
    Thanks eso funciono perfecto! el 20 ene. 2020 a las 14:55
0

Si no te importa tomar en cuenta mayúsculas y minísculas, ayúdate de:

  1. indexOf y mejor buscar coincidencias de manera plena en cada elemento li de la lista. Yo modifiqué tu código afín de que vieras el resultado con lo que te menciono.

  2. Además, ocupamos each de jQuery el cual busca e itera los elementos que tengan una coincidencia entre sí (en este caso, hacemos un each a cada li de la lista #GetbuscaLugares.:

$('#buscaLugares').keyup(function() {
  
  var busqueda = $(this).val().trim().toLowerCase(),
      coincidencia = "";
      $("#GetbuscaLugares li").each(function() {
        var li_string = $(this).html().trim().toLowerCase();
        console.log(li_string);
        if (li_string.indexOf(busqueda)) {
          $(this).slideUp();
        }
        else {
          $(this).slideDown();
        }
      });
});
<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.