Фильтрация элементов в WinJS-компоненте ListView



default.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Recipe4.4</title>
      <!-- WinJS references -->
      <link href="WinJS/css/ui-light.css" rel="stylesheet" />
      <script src="WinJS/js/base.js"></script>
      <script src="WinJS/js/ui.js"></script>
      <!-- Recipe4.4 references -->
      <link href="/css/default.css" rel="stylesheet" />
      <script src="/js/default.js"></script>
      <script src="/js/data.js"></script>
   </head>
   <body class="win-type-body">
      <h1>Recipe4.4</h1>
      <div>
         <input id="txtSearch" />
      </div>
      <div id="template" data-win-control="WinJS.Binding.Template">
         <h3 data-win-bind="innerText:name"></h3>
      </div>
      <div id="lstEmployees" data-win-control="WinJS.UI.ListView"
         data-win-options="{itemTemplate:select('#template')}">
      </div>
   </body>
</html>

data.js
(function() {
    "use strict";
    // List of Employees to be used a datasource.
    var lstEmployees = new WinJS.Binding.List([{
        id: 1,
        name: "Senthil Kumar"
    }, {
        id: 2,
        name: "Lohith GN"
    }, {
        id: 3,
        name: "Senthil Kumar B"
    }, {
        id: 4,
        name: "Vidyasagar"
    }, ]);

    function Initialize() {
        WinJS.UI.processAll().done(function() {
            // Get the Listview from the DOM
            var lstControl = document.getElementById('lstEmployees').winControl;
            // Get the Search Tex from the HTML Page
            var filterText = document.getElementById('txtSearch');
            lstControl.itemDataSource = lstEmployees.dataSource;
            filterText.addEventListener("keyup", function() {
                filterEmployee(lstControl, filterText.value);
            });
        });
    }
    // Function to filter the list
    function filterEmployee(listEmployee, searchtext) {
        var filtereddata = lstEmployees.createFiltered(function(item) {
            var result = item.name.toLowerCase().indexOf(searchtext);
            return item.name.toLowerCase().indexOf(searchtext) == 0;
        });
        listEmployee.itemDataSource = filtereddata.dataSource;
    }
    document.addEventListener("DOMContentLoaded", Initialize);
})();

Теги: