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>