Поиск по li со вложенностью jq
Есть список, у списка есть неограниченная вложенность, нужно сделать поиск по тексту в li
Вот, что сейчас получилось
$(document).ready(function(){
$("#name").keyup(function(){
_this = this;
var count = 0;
$.each($(".menu li"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) {
$(this).hide();
} else {
count+=1;
$(this).show();
}
});
$('#count').html(count);
});
$(".pluse").click(function () {
if($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).parent().find('ul').filter( ':first' ).removeClass('active');
$(this).parent().css('background', '#f8f9fa');
} else {
$(this).addClass('active');
$(this).parent().css('background', '#dddddd');
$(this).parent().find('ul').filter( ':first' ).addClass('active');
}
});
});
.menu {
margin-bottom: 0;
padding: 0;
list-style: none;
display: none;
}
.menu.active {
display: block;
}
.menu li {
position: relative;
background: #f8f9fa;
transition: .5s;
}
.menu li a {
display: block;
padding: 9px 2rem;
border-bottom: 1px solid;
}
.pluse {
position: absolute;
top: 0;
font-size: 33px;
font-weight: bolder;
left: 3px;
cursor: pointer;
z-index: 2;
transform: rotateZ(0deg);
transition: .3s;
}
.pluse.active {
transform: rotateZ(48deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Найдено: <span id="count">0</span> <br>
<input type="text" id="name" autocomplete="off">
<ul class="menu active">
<li>
<a href="/"> 1</a>
<div class="pluse">+</div>
<ul class="menu">
<li>
<a href="/"> - 2</a>
<div class="pluse">+</div>
<ul class="menu">
<li>
<a href="/"> - - 3</a>
<div class="pluse">+</div>
<ul class="menu">
<li>
<a href="/"> - - - 4</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Не могу понять, как сделать раскрытие списка, если найденный результат находиться в самом конце вложенности
Ответы (1 шт):
Автор решения: nicolaa
→ Ссылка
Решил задачу так:
$(document).ready(function(){
$("#name").keyup(function(){
$("#haiz").removeHighlight();
_this = this;
var count = 0;
if($(this).val().length) {
$.each($(".menu li a"), function() {
if($(this).parent().text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) {
$(this).parent().hide();
} else {
var searchTerm = $(_this).val(),
searchRegex = new RegExp(searchTerm, 'gi'),
val,
new_val;
val = $(this).text();
new_val = val.replace( searchRegex, '<span class="highlight">'+searchTerm+'</span>' );
if ( new_val !== val ) {
if ( /</.test( new_val ) ) {
$(this).html(new_val);
}
}
count+=1;
$(this).parent().show().parents('ul').addClass('active').parent().find('.pluse').addClass('active');
}
});
} else {
$('.f').addClass('active').find('li').show();
$('.p').removeClass('active');
$.each($(".menu li"), function() {
count+=1;
});
}
$('#count').html(count);
});
$(".menu-rubrik-pluse").click(function () {
if($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).parent().find('ul').filter( ':first' ).removeClass('active');
$(this).parent().css('background', '#f8f9fa');
} else {
$(this).addClass('active');
$(this).parent().css('background', '#dddddd');
$(this).parent().find('ul').filter( ':first' ).addClass('active');
}
});
jQuery.fn.removeHighlight = function() {
return this.find("span.highlight").each(function() {
with (this.parentNode) {
replaceChild(this.firstChild, this);
}
}).end();
};
});
.menu {
margin-bottom: 0;
padding: 0;
list-style: none;
display: none;
}
.menu.active {
display: block;
}
.menu li {
position: relative;
background: #f8f9fa;
transition: .5s;
}
.menu li a {
display: block;
padding: 9px 2rem;
border-bottom: 1px solid;
}
.pluse {
position: absolute;
top: 0;
font-size: 33px;
font-weight: bolder;
left: 3px;
cursor: pointer;
z-index: 2;
transform: rotateZ(0deg);
transition: .3s;
}
.pluse.active {
transform: rotateZ(48deg);
}
.highlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Найдено: <span id="count">0</span> <br>
<input type="text" id="name" autocomplete="off">
<div id="haiz">
<ul class="menu active f">
<li>
<a href="/"> 1</a>
<div class="pluse p">+</div>
<ul class="menu p">
<li>
<a href="/"> - 2</a>
<div class="pluse p">+</div>
<ul class="menu p">
<li>
<a href="/"> - - 3</a>
<div class="pluse p">+</div>
<ul class="menu p">
<li>
<a href="/"> - - - 4</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Еще захотелось выделить найденные совпадения, сделал по статье