0
364
Vistas¿Cómo filtrar en el menú por padre li qué hay dentro del hijo ul de li?
¿Cómo filtrar al escribir 'procesar' y todo lo que hay dentro?
Este es mi HTML:
búsqueda de entrada
<div class="input-group"> <input type="text" class="form-control filter-search" placeholder="Buscar..." autocomplete="off" id="mySearch"> <button class="btn_clear">x</button> </div>esta barra lateral
<ul class="sidebar-menu" data-widget="tree" id="myMenu"> <li class="treeview menu-open" id="mainProcessesNav"> <a class="menuhref" href="#"> <i class="fa fa-toggle-on"></i> <span><?= $this->lang->line('application_daily_process'); ?></span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <?php if (in_array('viewTrackingOrder', $user_permission)) : ?> <li id="semFreteNav" data-search="<?= $this->lang->line('application_daily_process'); ?>" >"> <a class="menuhref" href="<?php echo base_url('orders/semfrete') ?>"><i class="fa fa-circle-o"></i> <?= $this->lang->line('application_freight_to_wire'); ?></a> </li> <?php endif; ?> </ul> </li> </ul>Mi filtro en jquery
$(document).ready(function(){ $("#mySearch").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myMenu li a").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); }); if($("#myMenu li a:visible").length > 0){ $("#emptyMsg").hide(); }else{ $("#emptyMsg").show(); } }); }); Pensé en agregar el nombre del padre $(this).data("search").val() dentro de data-search="name of the parent" e intentar filtrarlo en jQuery Pero no funcionó . ¿Puede alguien ayudarme por favor?
La idea es que al teclear el nombre del padre quede abierto y enumere a todos los hijos y oculte a todos los demás.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Considera lo siguiente.
$(function() { $("#mySearch").on("keyup", function(event) { if ($(this).val().length > 0) { console.log("Starting Filter"); var term = $(this).val().toLowerCase(); console.log("Filter for: " + term); $(".treeview-menu > li.semFreteNav").each(function(i, el) { if ($(el).text().trim().toLowerCase().indexOf(term) > -1) { console.log("Found"); $(el).show(); } else { $(el).hide(); } }); } else { $(".treeview-menu > li.semFreteNav").show(); } }); $(".input-group button.btn_clear").click(function() { $("#mySearch").val("").trigger("keyup"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="input-group"> <input type="text" class="form-control filter-search" placeholder="Buscar..." autocomplete="off" id="mySearch"> <button class="btn_clear">x</button> </div> <ul class="sidebar-menu" data-widget="tree" id="myMenu"> <li class="treeview menu-open" id="mainProcessesNav"> <a class="menuhref" href="#"> <i class="fa fa-toggle-on"></i> <span>Processos</span> <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span> </a> <ul class="treeview-menu"> <li class="semFreteNav" data-search=""> <a class="menuhref" href="#someplace"><i class="fa fa-circle-o"></i> Fretas</a> </li> <li class="semFreteNav" data-search=""> <a class="menuhref" href="#someplace"><i class="fa fa-circle-o"></i> Pedidios</a> </li> <li class="semFreteNav" data-search=""> <a class="menuhref" href="#someplace"><i class="fa fa-circle-o"></i> Módulo</a> </li> <li class="semFreteNav" data-search=""> <a class="menuhref" href="#someplace"><i class="fa fa-circle-o"></i> Erros</a> </li> <li class="semFreteNav" data-search=""> <a class="menuhref" href="#someplace"><i class="fa fa-circle-o"></i> Administrar</a> </li> <li class="semFreteNav" data-search=""> <a class="menuhref" href="#someplace"><i class="fa fa-circle-o"></i> Produtos</a> </li> </ul> </li> </ul>Puede usar Filter, aunque podría ser mejor usar Each.
HTML requiere que todos los ID sean únicos. Su código PHP crearía una gran cantidad de ID que son todas iguales. Esto también puede causar varios problemas para JS/jQuery. Los cambié a Clase.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta