How to Filter ListBox Data Using TextBox Component

25 Apr 20255 minutes to read

This example demonstrates how to filter Syncfusion® ListBox data based on input from a TextBox. Bind an input event listener to the TextBox to capture user input and filter the items in the ListBox. Within the event handler, use the filter method to update the ListBox items, ensuring that only those matching the input text are included.

<template>
  <div id="app">
    <div id="container" style="margin:10px auto 0; width:250px;">
      <label>Enter Text: </label>
      <input type="text" id="filterTextBox" @input="handleFilterChange" placeholder="Enter text to filter"/>
      <h4>Select your favorite car:</h4>
      <ejs-listbox id="listbox" :dataSource="data"></ejs-listbox>
    </div>
  </div>
</template>
<script setup>
import { ListBoxComponent as EjsListbox } from "@syncfusion/ej2-vue-dropdowns";

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' },
  { text: 'Aston Martin One- 77', id: 'list-07' },
  { text: 'Jaguar XJ220', id: 'list-08' },
  { text: 'McLaren P1', id: 'list-09' },
  { text: 'Ferrari LaFerrari', id: 'list-10' },
];
const handleFilterChange = function (event) {
  let listboxobj = document.getElementById('listbox').ej2_instances[0];
  if (listboxobj) {
    listboxobj.filter(data, new Query().where('text', 'contains', event.target.value, true));
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>
<template>
<div id="app">
  <div id="container" style="margin:10px auto 0; width:250px;">
    <label>Enter Text: </label>
    <input type="text" id="filterTextBox" @input="handleFilterChange" placeholder="Enter text to filter" />
    <h4>Select your favorite car:</h4>
    <ejs-listbox id="listbox" :dataSource="data"></ejs-listbox>
  </div>
</div>
</template>

<script>
import { ListBoxComponent } from "@syncfusion/ej2-vue-dropdowns";
import { Query } from '@syncfusion/ej2-data';

export default {
name: "App",
components: {
  "ejs-listbox": ListBoxComponent
},
data() {
  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' },
      { text: 'Aston Martin One- 77', id: 'list-07' },
      { text: 'Jaguar XJ220', id: 'list-08' },
      { text: 'McLaren P1', id: 'list-09' },
      { text: 'Ferrari LaFerrari', id: 'list-10' },
    ]
  }
},
methods: {
  handleFilterChange(event) {
    const listbox = document.getElementById('listbox').ej2_instances[0];
    if (listbox) {
      listbox.filter(this.data, new Query().where('text', 'contains', event.target.value, true));
    }
  }
}
};
</script>