This tutorial describes how to search for DataSource items that satisfy the required conditions. You will learn how to specify values by which the required items are searched. Finally, you will see how to change the search value at runtime.
Begin by creating an array that will be accessed via the DataSource. Create the EMPLOYEES variable and assign the required array to it. You can find the EMPLOYEES array in the employees.js file.
For demonstration purposes, create the render function that displays data in the <table> element located on the markup.html page. You can see the render function implementation in the renderer.js file.
Initially, the table displays only column headers.
Create a DataSource instance and assign it to the dataSource variable. Pass an object containing the store and searchExpr fields to the DataSource constructor to associate the DataSource instance with the required array, and specify item object properties by which the required items are searched. Assign an array containing names of the required properties to the searchExpr option. The store option should contain the EMPLOYEES array.
To display data each time it is loaded, add a handler to the DataSource changed event and call the render function within this handler. Then, call the load() method of the DataSource instance to load data.
Add the input element with the id attribute set to "search-box" to markup.html. This element is intended to input a search value. To apply a new search value each time an input element value is changed, call the searchValue(value) method and load() method in the keyup event handler of the input element. The searchValue(value) method accepts the new search value to the DataSource instance. The load() method loads data satisfying the specified search criteria.