Filter list items in Vue ListView component

19 Feb 20256 minutes to read

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

Render a textbox to get user input for filtering data.
Render ListView with dataSource, and set the sortOrder property.
Bind the keyup event for the textbox to perform the filtering operation. To filter list data, pass the list data source to the DataManager, manipulate the data using the executeLocal method, and then update the ListView’s dataSource with the filtered data.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-section">
    <div id='sample'>
      <input class="e-input" type="text" id='textbox' ref='textboxEle' placeholder="Filter" title="Type in a name"
        @keyup='onkeyup' />
      <!-- ListView element -->
      <ejs-listview id='list' ref='listObj' :dataSource='data' :fields='fields' sortOrder='Ascending'>
      </ejs-listview>
    </div>
  </div>
</template>

<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";
import { DataManager, Query } from "@syncfusion/ej2-data";
import {ref} from 'vue';

const listObj = ref(null);
const textboxEle = ref(null);

const data = [
  { 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" }
];
const fields = { text: "text", id: "id" };

const onkeyup = () => {
  let keyupvalue = textboxEle.value.value;
  let Filtereddata = new DataManager(data).executeLocal(new Query().where("text", "startswith", keyupvalue, true));
  if (!keyupvalue) {
    listObj.value.ej2Instances.dataSource = data.slice();
  } else {
    listObj.value.ej2Instances.dataSource = Filtereddata;
  }
};

</script>
<style>
#list {
  box-shadow: 0 1px 4px #ddd;
  border-bottom: 1px solid #ddd;
}

#sample {
  height: 220px;
  margin: 0 auto;
  display: table;
}
</style>
<template>
  <div class="control-section">
    <div id = 'sample'>
      <input class="e-input" type="text" id='textbox' ref='textboxEle' placeholder="Filter" title="Type in a name" @keyup='onkeyup' />
      <!-- ListView element -->
      <ejs-listview id='list' ref='listObj' :dataSource='data' :fields='fields' sortOrder='Ascending'>
      </ejs-listview>
    </div>
  </div>
</template>
<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";
import { DataManager, Query } from "@syncfusion/ej2-data";

export default {
name: "App",
components: {
"ejs-listview":ListViewComponent
},
  data: function() {
    return {
      data: [
        { 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" }],
      fields: { text: "text", id: "id" },
    };
  },
  methods:{
   onkeyup: function(){
      let keyupvalue = this.$refs.textboxEle.value;
      let data = new DataManager(this.data).executeLocal(new Query().where("text", "startswith", keyupvalue, true));
      if (!keyupvalue) {
        this.$refs.listObj.ej2Instances.dataSource = this.data.slice();
      } else {
        this.$refs.listObj.ej2Instances.dataSource = data;
      }
    }
  }
}
</script>
<style>
#list {
  box-shadow: 0 1px 4px #ddd;
  border-bottom: 1px solid #ddd;
}
#sample {
  height: 220px;
  margin: 0 auto;
  display: table;
}
</style>

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

Filter list items in the ListView in Vue ListView component