0
361
ViewsHow to filter in menu by li parent what is inside the ul child of li?
How to filter when typing 'process' it and everything that is inside it?
This my HTML:
input search
<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>
this side_bar
<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>
My filter in 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();
}
});
});
I thought about adding the name of the parent $(this).data("search").val() inside a data-search="name of the parent" and trying to filter by it in jQuery But it didn't work. Can someone help me please?
The idea is when typing the name of the father it stays open and lists all the children and hides all the others.
·
Juan Pablo Isaza
1 answers
Answer question0
Consider the following.
$(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>You can use Filter, yet it might be better to use Each.
HTML requires that all IDs be unique. Your PHP code would create a large number of IDs that are all the same. This can also cause various issues for JS/jQuery. I switched them to Class.
·
Juan Pablo Isaza
Report
Answer question