From bbcce1c22b02292f86e4fe3c80945a8e36a0349b Mon Sep 17 00:00:00 2001 From: Build Automaion Date: Fri, 1 Nov 2024 17:17:13 +0530 Subject: [PATCH] Integrated latest changes at 11-01-2024 4:30:39 PM --- ej2-react-toc.html | 1 + .../listbox/filter-listbox-cs1/app/index.jsx | 37 +++++++++++++++ .../listbox/filter-listbox-cs1/app/index.tsx | 47 +++++++++++++++++++ .../listbox/filter-listbox-cs1/index.html | 34 ++++++++++++++ .../filter-listbox-cs1/systemjs.config.js | 46 ++++++++++++++++++ ej2-react/list-box/how-to/filter-listbox.md | 24 ++++++++++ 6 files changed, 189 insertions(+) create mode 100644 ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.jsx create mode 100644 ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.tsx create mode 100644 ej2-react/code-snippet/listbox/filter-listbox-cs1/index.html create mode 100644 ej2-react/code-snippet/listbox/filter-listbox-cs1/systemjs.config.js create mode 100644 ej2-react/list-box/how-to/filter-listbox.md diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 466aa0933..d40a4071f 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -1632,6 +1632,7 @@
  • Enable Scroller
  • Form Submit
  • Select Items
    • +
  • Filter ListBox Data Using TextBox Component
  • API Reference
    • 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 new file mode 100644 index 000000000..de41417e8 --- /dev/null +++ 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 ( +
    + + +

    Select your favorite car:

    + listboxobj = scope} + /> +
    ); +} +export default App; +ReactDOM.render(, 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 new file mode 100644 index 000000000..f8b6c4051 --- /dev/null +++ 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 ( +
    + + +

    Select your favorite car:

    + listbox = scope} + /> +
    + ); +} +export default App; +ReactDOM.render(, 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 new file mode 100644 index 000000000..74d0a3d32 --- /dev/null +++ b/ej2-react/code-snippet/listbox/filter-listbox-cs1/index.html @@ -0,0 +1,34 @@ + + + + + Syncfusion React ListBox + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file 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 new file mode 100644 index 000000000..6c7d3df8f --- /dev/null +++ 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'); \ No newline at end of file diff --git a/ej2-react/list-box/how-to/filter-listbox.md b/ej2-react/list-box/how-to/filter-listbox.md new file mode 100644 index 000000000..620a130f6 --- /dev/null +++ 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" %} \ No newline at end of file