syncfusion-content · SyncfusionBuild · Nov 1, 2024 · Nov 1, 2024
diff --git a/ej2-react-toc.html b/ej2-react-toc.html
@@ -1632,6 +1632,7 @@
 <li><a href="/ej2-react/list-box/how-to/enable-scroller">Enable Scroller</a></li>
 <li><a href="/ej2-react/list-box/how-to/form-submit">Form Submit</a></li>
 <li><a href="/ej2-react/list-box/how-to/select-items">Select Items</a></li>
+<li><a href="/ej2-react/list-box/how-to/filter-listbox">Filter ListBox Data Using TextBox Component</a></li>
 </ul>
 </li>
 <li><a href="https://ej2.syncfusion.com/react/documentation/api/list-box/">API Reference</a></li>

diff --git a/ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.jsx b/ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.jsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+function App() {
+    let listboxobj;
+    let 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 = (event) => {
+      if (listboxobj) {
+        listboxobj.filter(data, new Query().where('text', 'contains', event.target.value, true));
+      }
+    };
+    return (
+    <div className="e-section-control">
+      <label>Enter Text: </label>
+      <input type="text" id="filterTextBox" onInput={handleFilterChange} placeholder="Enter text to filter" />
+      <h4>Select your favorite car:</h4>
+      <ListBoxComponent
+        id="listbox"
+        dataSource={data}
+        ref={(scope) => listboxobj = scope}
+      />
+    </div>);
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
diff --git a/ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.tsx b/ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.tsx
@@ -0,0 +1,47 @@
+
+
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
+import { Query } from '@syncfusion/ej2-data';
+
+function App() {
+  let listbox: ListBoxComponent;
+  let data: { [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' },
+    { 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 = (event: any) => {
+    if (listbox) {
+      listbox.filter(data, new Query().where('text', 'contains', event.target.value, true));
+    }
+  };
+
+  return (
+    <div className="e-section-control">
+      <label>Enter Text: </label>
+      <input type="text" id="filterTextBox" onInput={handleFilterChange} placeholder="Enter text to filter"/>
+      <h4>Select your favorite car:</h4>
+      <ListBoxComponent
+        id="listbox"
+        dataSource={data}
+        ref={(scope) => listbox = scope}
+      />
+    </div>
+  );
+}
+export default App;
+ReactDOM.render(<App />, document.getElementById('sample'));
+
+
+
diff --git a/ej2-react/code-snippet/listbox/filter-listbox-cs1/index.html b/ej2-react/code-snippet/listbox/filter-listbox-cs1/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React ListBox</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/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>
+    <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id='sample' style="margin: 20px auto 0; width:250px;">
+        <div id='loader'>Loading....</div>
+    </div>
+</body>
+
+</html>
diff --git a/ej2-react/code-snippet/listbox/filter-listbox-cs1/systemjs.config.js b/ej2-react/code-snippet/listbox/filter-listbox-cs1/systemjs.config.js
@@ -0,0 +1,46 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+        target: "es5",
+        module: "commonjs",
+        moduleResolution: "node",
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true,
+        "jsx": "react"
+    },
+    meta: {
+        'typescript': {
+            "exports": "ts"
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
diff --git a/ej2-react/list-box/how-to/filter-listbox.md b/ej2-react/list-box/how-to/filter-listbox.md
@@ -0,0 +1,24 @@
+---
+layout: post
+title: Filter List box Data Using TextBox component | Syncfusion
+description: Learn here all about Filter List box Data Using TextBox component in Syncfusion React List box component of Syncfusion Essential JS 2 and more.
+control: ListBox Filter
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# How to Filter ListBox Data Using TextBox Component
+
+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`](https://ej2.syncfusion.com/react/documentation/api/list-box/#filter) method to update the ListBox items, ensuring that only those matching the input text are included.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/listbox/filter-listbox-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/listbox/filter-listbox-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+ {% previewsample "page.domainurl/code-snippet/listbox/filter-listbox-cs1" %}