1

Tengo el siguiente código que muestra como filtrar los ítems en un list-group. Estoy intentando resaltar el texto de búsqueda; es decir, si busco la palabra juegos, debería mostrar solamente el ítem "Videojuegos”, además, necesito resaltar la palabra juegos en los items filtrados con un style "background-color:Yellow"

Si alguien puede ayudarme, estaré muy agradecido.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Categorías</h2>
  <input class="form-control" id="myInput" type="text" placeholder="Busqueda..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">Bebidas</li>
    <li class="list-group-item">Electrónica</li>
    <li class="list-group-item">Juguetes</li>
    <li class="list-group-item">Ropa</li>
    <li class="list-group-item">Videojuegos</li>
    <li class="list-group-item">Zapatos</li>
  </ul>  
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
    
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
     $(this).css('background-color', 'yellow');
    })
  });
});
</script>

1 respuesta 1

0

Hice una solución rápida, resalta en negrita las letras que se buscan en el campo de texto.

Pero tiene un pequeño detalle, solo falta agregar una expresión regular que no distiga entre mayúsculas, minúsculas y acentos. En cuanto la encuentre, actualizo la respuesta.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Categorías</h2>
  <input class="form-control" id="myInput" type="text" placeholder="Busqueda..">
  <br>
  <ul class="list-group" id="myList">
    <li class="list-group-item">Bebidas</li>
    <li class="list-group-item">Electrónica</li>
    <li class="list-group-item">Juguetes</li>
    <li class="list-group-item">Ropa</li>
    <li class="list-group-item">Videojuegos</li>
    <li class="list-group-item">Zapatos</li>
  </ul>  
</div>

<script>
$(document).ready(function(){

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
    
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      
     $(this).css('background-color', 'yellow');
    });
    resaltar($(this).val());
  });
  
  function resaltar(value){
  var li = $(".list-group-item"); 
  for(var i=0; i < li.length; i++){
        
       var reg = new RegExp(value, "g");
       li[i].innerHTML = li[i].innerHTML.replace(/<b>/g, '').replace(/<\/b>/g, '');
       li[i].innerHTML = li[i].innerHTML.replace(reg, `<b>${value}</b>`);
    }
  }
});
</script>

Tu Respuesta

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

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