Панель поиска JavaScript с панелью Kendo UI Panelbar

Может кто-нибудь, пожалуйста, помогите мне с панелью поиска для Kendo UI Panelbar.

  1. При поиске я хочу, чтобы он отображался в type='program'. Например, если я ищу аккаунт, должны появиться программы, в которых есть слова аккаунта.
  2. В настоящее время он вообще не работает. Он просто расширяет всю мою программу панели. :(

Здесь я предоставляю демонстрацию dojo

Мой 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>

Here i provide dojo demo


javascript search searchbar kendo-ui kendo-panelbar
person Nixoderm    schedule 01.03.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Атрибут Type <LI> type предназначен для типов маркеров. Поместите значения типов (т. е. значения категоризации уровня иерархии) в атрибут класса. Сдача

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

to 

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

Значение id должно быть уникальным среди всех элементов DOM (за исключением, возможно, переключателей). Все листья имеют диапазоны с одинаковым значением идентификатора, id="spanpanelbar". Поместите их также в атрибут класса. Сдача

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

to

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

При обработке результатов поиска изменяется только свойство display стиля листа. Измените обработку, чтобы добавить к <li> класс, соответствующий условию результата поиска.

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 (скрыть все)
  • Когда сопоставление выполнено, установите для программы и ее родительских элементов класс match (показать путь к программе)

Пример:

    // 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);
      }

додзё

person Richard    schedule 01.03.2019
comment
Спасибо за ваш ответ, Да, это работает так, как я хочу, когда поиск, но как это сделать, отображает только программу. Например, при поиске по слову mana в результате будут отображаться только Ledger Management и Group Management, поэтому он не расширяет ненужные вещи. Это возможно сделать? Пожалуйста помоги. - person Nixoderm; 04.03.2019
comment
Вы можете свернуть все и расширить с помощью соответствующей li.program .parentsUntil(), расширяя уровни, которые ведут к ней. Или аналогично с переключением класса match/nomatch на расширенной панели (обновлено Dojo). - person Richard; 04.03.2019
comment
Еще раз спасибо Ричард! Уже час пытаюсь отредактировать образец додзё, но не получается. После поиска программы, как отобразить панель панели кендо обратно в нормальное состояние, Пример после поиска, затем я нажал Backspace, я хочу отобразить все программы. Еще раз спасибо, вы мне очень помогли. - person Nixoderm; 04.03.2019
comment
Либо 1. добавьте кнопку сброса - обработчик щелчка отключает все классы соответствия и несоответствия, 2. внимательно посмотрите на код, удалите использование строки if (filter.length < 3) return; // only search 3 or more characters in searchTerm, чтобы предотвратить поиск на очень небольшом количестве (или выполните сброс, когда длина searchTerm равна 0.) - person Richard; 04.03.2019
comment
извините мой плохой не отображать всю программу, но это свернуть все панели. panelbar.collapse($("li", panelbar.element)); если я нажму на клавишу Backspace. - person Nixoderm; 04.03.2019
comment
Спасибо за помощь! - person Nixoderm; 04.03.2019
comment
@Nixoderm не забудьте написать больше, чем просто комментарий. Когда вы увидите приемлемый ответ, вы можете отметить его и проголосовать за него. См. тему SO Что делать, когда кто-то отвечает на мой вопрос - person Richard; 04.03.2019