Jsviews过滤搜索

<!-- 定义模板 -->
<script id="userTemplate" type="text/x-jsrender">
  <ul>
    {^{for users ~searchFilter=searchFilter}}
      <li>{{:name}}</li>
    {{/for}}
  </ul>
</script>

<!-- 输入框用于搜索 -->
<input type="text" id="searchInput" placeholder="Search by name">

<!-- 渲染模板 -->
<div id="userList"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/1.0.9/jsviews.min.js"></script>
<script>
  // 用户数据
  var users = [
    { name: "Alice" },
    { name: "Bob" },
    { name: "Charlie" },
    // ...更多用户
  ];

  // 搜索过滤器
  var searchFilter = function(user) {
    var searchTerm = $("#searchInput").val().toLowerCase();
    return user.name.toLowerCase().includes(searchTerm);
  };

  // 渲染模板
  var template = $.templates("#userTemplate");
  template.link("#userList", { users: users, searchFilter: searchFilter });

  // 监听输入框变化，重新渲染
  $("#searchInput").on("input", function() {
    template.link("#userList", { users: users, searchFilter: searchFilter });
  });
</script>

$("#searchInput").on("input", function() {
  template.link("#userList", { users: users, searchFilter: searchFilter });
});