如何在CSS中使用UL LI樹視圖進行搜索

我使用UL LI渲染樹。家長不可選擇，但可通過點擊複選框來選擇孩子。默認情況下，樹視圖不會展開。我正在嘗試添加搜索功能，以便用戶可以鍵入一個大小寫不敏感的搜索條件，並且樹會展開並通過突出顯示結果來顯示匹配。如何在CSS中使用UL LI樹視圖進行搜索

我有一個JS函數，但它似乎並沒有返回匹配的高亮度結果。任何建議，將不勝感激。

HTML

<div id="errorCodes"> 

    <ul class="treeview"> 
     <li class="collapsable"> 
      <div class="hitarea collapsable-hitarea"></div> 

      Pipettor Aspiration Dispense 

      <ul class="treeview" style="display: block;"> 
       <li> 
        <input id="error150011" type="checkbox" value="150011"></input> 

        Unknown Error 

       </li> 
       <li class="expandable"></li>

JS功能

$("#search_tree").click(function() { 

    $("#errorCodes li").removeclass("collapsible").find("input").removeClass("highlighted"); 
    //Search again 
    $("#errorCodes li input:Contains(" + $('#plugins4_q').val() + ")") 
    .addClass("highlighted").parents("li").addClass("collapsible"); 

});

來源

2014-02-08 tam tam

我可以看到一個錯字 - 李類=「可摺疊」，但在你的JS你寫可摺疊 – Bill

它應該搜索'input'值還是'li'文本？一個[jsFiddle]（http://jsfiddle.net/）會非常有幫助。 – Moob

假設你要搜索相鄰的輸入（而非input值）的文本，我裹在每個input一個label並有腳本搜索。有已經進入這個解決方案有很多猜測的工作，但下面可能是有用的：

$("#search_tree").click(function() { 
    //close and unhighlight everything 
     $(".opened, .highlighted").removeClass("opened highlighted"); 
    //Perform search 
     var term = $('#plugins4_q').val().toLowerCase(); 
     //for case-insensitive searches we need to use a filter: 
      $('#errorCodes li label').filter(function(){ 
       return $(this).text().toLowerCase().indexOf(term) > -1; 
      }) 
     //highlight matches 
      .addClass("highlighted") 
     //open all ancestors 
      .parents("li").addClass("opened"); 
});

http://jsfiddle.net/s4Qkz/

來源

2014-02-09 00:39:57 Moob

爲我工作。只有chaned $（「＃search_tree」）。click（function（）{to $（「＃search_tree」）。onkeydown（function（）{ –

如何在CSS中使用UL LI樹視圖進行搜索

回答

相關問題