JavaScript 搜索栏和 Kendo UI 面板栏

Question

有人可以帮我搜索 Kendo UI 面板栏吗？

搜索时我希望它显示在 type='program' 上。例如，如果我搜索 account，应该会出现包含 account 字词的程序。
目前它根本不起作用。它只是扩展了我所有的面板栏程序。 :(

这里我提供dojo demo

我的javascript

function myFunction() {

var panelbar = $("#panelbar").data("kendoPanelBar");
panelbar.expand($("li", panelbar.element));
//panelbar.collapse($("li", panelbar.element));

var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("panelbar");
li = ul.getElementsByTagName("li");

for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("li")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }     
}
}

基本上我的嵌套列表是这样的

<ul id="panelbar">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..."> 
<li type="module">Agencies &amp; Groups
    <ul>
    <li type="category">Agency &amp; Booker
    <ul>
    <li type="program">Agency &amp; Booker</li>
    <li type="program">Region</li>
    <li type="program">Sub Region</li>
    </ul>
    </li>
    <li type="program">Agency Category</li>
    <li type="program">Agency Contract</li>
    <li type="program">Agency Overview</li>
    </ul>
</li>   
<li type="module">Call Charge &amp; Billing
    <ul>
    <li type="category">JDS
    <ul>
    <li type="program">JDS Room Mapping</li>
    <li type="program">JDS Room Status</li>
    <li type="program">DS Interface</li>
    </ul>
    </li>
    <li type="category">Operator Panel
    <ul>
    <li type="program">Wake Up Call</li>
    <li type="program">Operator Panel</li>
    </ul>
    </li>       
    <li type="program">Call Code</li>
    <li type="program">Charge Rate</li>
    <li type="program">Property PABX</li>
    <li type="program">Call Transaction</li>
    </ul>
</li>

这里我提供dojo demo

Answer 1

Type <LI> type 属性用于项目符号类型。将您的类型值（即层次结构级别分类值）放在 class 属性中。变化

<li type="category" label=""><span class="k-icon ehors-subfolder-icon"></span>Account's Ledger …

到

<li class="category" label=""><span class="k-icon ehors-subfolder-icon"></span>Account's Ledger ….

id 值在所有 DOM 元素中应该是唯一的（除了单选按钮）。叶子都具有具有相同 id 值 id="spanpanelbar" 的跨度。将它们也放在 class 属性中。变化

<li type="program"><span id="spanpanelbar" class="k-icon ehors-folderopen-icon"></span>General Ledger</li>

到

<li class="program"><span class="spanpanelbar k-icon ehors-folderopen-icon"></span>General Ledger</li>

搜索匹配结果处理仅更改叶子的样式 display 属性。更改处理在<li>中添加一个class，对应搜索结果条件

style
.program.nomatch {display:block; color: lightgray } /* or simply display: none */
.program.match   {display:block;  }

javascript
match = $(this).text().match(searchRegEx);
$li = $(this);
$li.toggleClass("match", (match!=null)).toggleClass("nomatch",(match==null));

查看此 dojo，这是对您的原始版本的更新。它有红利代码：

等待输入停止
突出显示匹配的片段

PanelBar 小部件是分层查看器。必须显示程序路径中的项目才能看到该程序。为了仅显示找到的程序的路径，您将：

在搜索开始时将所有项目设置为 nomatch class（隐藏所有内容）
进行匹配后，将程序及其父项设置为匹配 class（取消隐藏程序路径）

示例：

    // hide top and middle tier so they wont show if there are no
    // subordinate programs that match

    $("li.category").toggleClass("nomatch", true).toggleClass("match",false);
    $("li.module")  .toggleClass("nomatch", true).toggleClass("match",false);

    // evaluate each program for matching the search term

    $("#panelbar li.program").each(function() { 
      var match, $li, $span, textnode, element;

      match = $(this).text().match(searchRegEx);
      $li = $(this);

      // hide/display programs according to match result

      $li.toggleClass("match", (match!=null))
         .toggleClass("nomatch",(match==null));

      // display items in path when match made

      if (match!=null) {
        $li.parentsUntil("#panelbar", "li")
          .toggleClass("match",true)
          .toggleClass("nomatch",false);
      }

dojo

JavaScript 搜索栏和 Kendo UI 面板栏

JavaScript search bar with Kendo UI Panelbar

javascript

search

kendo-ui

searchbar

kendo-panelbar