Ищешь пункт в UL

Question

Моей неупорядоченной структуре дерева Списка выглядит следующим образом:

<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> 

Я печатаю текст в текстовом поле и поиск элемента в этом списке. Вот мой демо http://jsfiddle.net/yunabna5/

я столкнулся три основные проблемы:

1. На каждый печатаемый символ, список закрывается и открывается.
2. Элемент списка, а также родители также подсвечиваются. Я хочу, чтобы только элементы списка с поисковым запросом должны были подсвечиваться.
3. После того как список ищется, я не могу расширить другие списки

Как исправить мой код? Предложения?

Answer 1

$('#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); 

});

Я думаю, что это решит вашу проблему http://jsfiddle.net/yunabna5/10/ если не скажите почему.