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.
dataSource, and set
the sortOrder property.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.//Define an array of JSON data
var listData = [
{ 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 ListView component
var listObj = new ej.lists.ListView({
//Set defined data to dataSource property
dataSource: listData,
//Map the appropriate columns to fields property
fields: { text: "text", id: "id" },
//Set sortOrder property
sortOrder: "Ascending"
});
//Render initialized ListView component
listObj.appendTo("#list");
document.getElementById("textbox").addEventListener("keyup", onKeyUp);
//Here we are handling filtering of list items using dataManager for ListView
function onKeyUp(e) {
var value = document.getElementById("textbox").value;
var data = new ej.data.DataManager(listData).executeLocal(new ej.data.Query().where("text", "startswith", value, true));
if (!value) {
listObj.dataSource = listData.slice();
}
else {
listObj.dataSource = data;
}
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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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%;
}
#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
endswithin where clause instead ofstartswith.