jsviews过滤搜索答案

【问题标题】：Jsviews filter searchjsviews过滤搜索
【发布时间】：2019-06-11 07:55:51
【问题描述】：

如何在 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}}

这当前显示列表中的所有项目，但是我只希望显示列表中与搜索 HTML 元素的 .value 的 RegEx 匹配的元素：

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

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

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

【问题讨论】：

标签： search filter jsviews

【解决方案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>

【讨论】：