Filter and search list items in EJ2 TypeScript ListView control

28 Jan 20256 minutes to read

You can display filtered data in the ListView control based on user input using the DataManager. Follow these steps to render the ListView with filtered data:

  • Render a textbox to get input for filtering.

  • Render the ListView with a dataSource, and set the sortOrder property to arrange the items.

  • Bind the keyup event for the textbox to perform the filtering operation. To filter the list data, pass the list data source to the DataManager, manipulate the data using the executeLocal method, and then update the filtered data as the ListView’s dataSource.

import { ListView } from "@syncfusion/ej2-lists";
import { enableRipple } from "@syncfusion/ej2-base";
import { DataManager, Query } from "@syncfusion/ej2-data";
enableRipple(true);
//Define an array of JSON data
let listData: { [key: string]: Object }[] = [
  { text: "Hennessey Venom", id: "list-01" },
  { text: "Bugatti Chiron", id: "list-02" },
  { text: "Bugatti Veyron Super Sport", id: "list-03" },
  { text: "SSC Ultimate Aero", id: "list-04" },
  { text: "Koenigsegg CCR", id: "list-05" },
  { text: "McLaren F1", id: "list-06" }
];

// Initialize the ListView control
let listObj: ListView = new ListView({
  //Set the defined data to the dataSource property
  dataSource: listData,
  //Map the appropriate columns to the fields property
  fields: { text: "text", id: "id" },
  //Set the sortOrder property
  sortOrder: "Ascending"
});
//Render the initialized ListView control
listObj.appendTo("#list");

(document.getElementById("textbox") as HTMLInputElement).addEventListener("keyup", onKeyUp);
//Here, the list items are filtered using the DataManager instance for ListView
function onKeyUp() {
  let value = (document.getElementById("textbox") as HTMLInputElement).value;
  let data: Object[] = new DataManager(listData).executeLocal(
    new Query().where("text", "startswith", value, true)
  );
  if (!value) {
    listObj.dataSource = listData.slice();
  } else {
    listObj.dataSource = data as { [key: string]: Object }[];
  }
  listObj.dataBind();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for ListView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id="container">
        <div id="sample">
            <input class="e-input" type="text" id="textbox" placeholder="Filter" title="Type in a name">
            <div id="list"></div>
        </div>
    </div>
    <style>
        #list {
            box-shadow: 0 1px 4px #ddd;
            border-bottom: 1px solid #ddd;
        }

        #sample {
            height: 220px;
            margin: 0 auto;
            display: block;
            max-width: 350px;
        }
    </style>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: "Helvetica Neue", "calibiri";
  font-size: 14px;
  top: 45%;
  left: 45%;
}

In this demo, the data is filtered by the starting character of the list items. You can also filter list items by their ending character by using endswith in the where clause instead of startswith.