UL Listing
The structure of my Unordered List looks like this:
<ul id="Budor">
<li class="L-1">First
<span class='jor'>+</span>
<ul>
<li class="L-2">First Child
<span class='jor'>+</span>
<ul>
<li>Tropical Thunder</li>
<li>Magnolia</li>
</ul>
</li>
</ul>
</li>
I am entering text into a text box and looking for an item in this list. Here's my demo http://jsfiddle.net/yunabna5/
I faced three main problems:
- For each character typed, the list closes and opens.
- The list item as well as the parents are also highlighted. I want only the list items with the search term to be highlighted.
- After searching for a list, I cannot expand the rest of the lists
How do I fix my code? Suggestions?
+3
source to share
1 answer
$('#txt').keyup(function () {
if(this.value == ""){
bud.find('ul').stop(true, true).slideDown(500);
bud.find("li.highlight").removeClass("highlight");
return;
}
if(bud.find('.highlight').length == 0){
bud.find('ul').stop(true, true).slideUp(500);
}
bud.find("li ul")
.find('ul')
.find('li:contains(' + this.value + ')')
.addClass("highlight");
bud.find('li.highlight')
.stop(true)
.parentsUntil(bud)
.slideDown(500);
});
I think this will solve your problem http://jsfiddle.net/yunabna5/10/ if you don't tell me why.
0
source to share