Jsviews фильтр поиска - PullRequest
Новая
       16

Jsviews фильтр поиска

0 голосов
/ 11 июня 2019

Как мне создать фильтр поиска в JSViews? Обычно я собираю элемент html по его классу с помощью методов .getElementsByClassName () и .value () и добавляю сравнение ===, чтобы соответствовать правильным критериям. Как я могу сделать что-то подобное в JsViews

Я уже пытался добавить listItem в IF, чтобы соответствовать значению ввода html (панель поиска), но я не знаю, как получить значение элемента поиска (JQuery было бы легко использовать $ ( ".search")), или сравните его со списком элементов, используя regExp. 

{^{if list && list.length}}
<ul autoselectitem="true" tabindex="-1" operationalindex="1" allindex="1">
    {^{for list}}
          {{include tmpl="listItem" /}}
    {{/for}}
</ul> 
 {{else}}

     <p>Nothing Found</p>

{{/if}}

В настоящее время отображаются все элементы в списке, однако я хочу, чтобы отображались только те элементы в списке, которые соответствуют RegEx .value поискового HTML-элемента: 

<input type="text" class="search" data-link="search" placeholder="Search...">

Так, например, если я введу «е» в строку поиска, все элементы в списке, которые не имеют буквы «е», должны исчезнуть.

Код связал всю работу, но то, что я попробовал, дало мне ошибки нулевого указателя, потому что я неправильно захватывал элемент ввода по его классу или ссылке на данные. Как я мог сделать это самым простым способом? Спасибо

1 Ответ

0 голосов
/ 05 июля 2019

Вот один из способов сделать это: 

<script id="myTmpl" type="text/x-jsrender">
  <input type="text" class="search" data-link="search" placeholder="Search...">

  {^{if list && list.length}}
    <ul autoselectitem="true" tabindex="-1" operationalindex="1" allindex="1">
      {^{for list filter=~flt depends="search"}}
        <li data-link="#data"></li>
      {{/for}}
    </ul> 
  {{/if}}
</script>

<div id="page"></div>

<script>
  var myTmpl = $.templates("#myTmpl"),
    data = {
      list: ["a", "b"],
      search: ""
    },
    helpers = {
    flt: function(item, index, items) {
      return item.indexOf(data.search) > -1;
    }};
  myTmpl.link("#page", data, helpers);
</script>
...