jquery - 在 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/如果不告诉我为什么。