Jsviews过滤搜索

Question

如何在JSViews中创建筛选搜索？通常，我会使用.getElementsByClassName()和.value()方法按类获取html元素，并添加===比较以满足正确的条件。如何在JsViews中执行类似的操作

我已经尝试在IF中添加listItem以匹配html输入(搜索栏)的值，但我不知道如何获取搜索元素的值(JQuery使用$(“.search”)会更容易)，或者使用regExp将其与listItems进行比较。

{^{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匹配的元素：

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

例如，如果我在搜索栏中键入"e“，则列表中不含字母"e”的所有项目都应该消失。

代码链接了所有的工作，但我尝试的结果是空指针错误，因为我没有通过它的类或数据链接正确地获取输入元素。我怎样才能以最简单的方式做到这一点呢？谢谢

Answer 1

这里有一种方法：

<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>