JavaScript
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Filter and search list items using listview in JavaScript ListView control

30 Mar 2023 / 2 minutes to read

The filtered data can be displayed in the ListView control depending upon on user inputs using the DataManager. Refer to the following steps to render the ListView with filtered data.

  • Render a textbox to get input for filtering data.
  • Render ListView with dataSource, and set the sortOrder property.
  • Bind the keyup event for textbox to perform filtering operation. To filter list data, pass the list data source to the DataManager, manipulate the data using the executeLocal method, and then update filtered data as ListView dataSource.
Source
Preview
index.ts
index.html
index.css
Copied to clipboard
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").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();
}
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/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>
</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>
</body>

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

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

#list {
  box-shadow: 0 1px 4px #ddd;
  border-bottom: 1px solid #ddd;
}
#sample {
  height: 220px;
  margin: 0 auto;
  display: block;
  max-width: 350px;
}

In this demo, data has been filtered with starting character of the list items. You can also filter list items with ending character by passing the endswith in where clause instead of startswith.

Previous
Next