Preciso filtrar elementos de uma lista e mostrar em uma lista resultado. Fiz o seguinte código:
var ele = [];
$('.search').keyup(function(event) {
var val = $(this).val().toUpperCase();
$('.title').each(function(index, el) {
if($(this).find('a').text().toUpperCase().indexOf(val) != -1){
if(val != "" && val != null){
ele.push($(this).clone());
}
}
});
$('.result').html(ele);
ele = [];
});
Esse é o html:
<input type="text" class="search">
<ul class="result"></ul>
<ul class="list">
<li class=""><a href="">Elder</a>
<ul>
<li class=""><a href="">Cell</a>
<ul>
<li class="title"><a href="">Apolo</a></li>
<li class="title"><a href="">megaman</a></li>
<li class="title"><a href="">goku</a></li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li class="title"><a href=""> marcos</a></li>
<li class="title"><a href=""> weslley</a></li>
</ul>
</li>
O código funciona mas por algum motivo que não consegui identificar, ele lista o mesmo elemento que já foi filtrado enquanto se digita no input. Onde estou errando? Obrigado!