Skip to content

Commit bbcce1c

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 11-01-2024 4:30:39 PM
1 parent 7934d2c commit bbcce1c

File tree

6 files changed

+189
-0
lines changed

6 files changed

+189
-0
lines changed

‎ej2-react-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1632,6 +1632,7 @@
16321632
<li><a href="/ej2-react/list-box/how-to/enable-scroller">Enable Scroller</a></li>
16331633
<li><a href="/ej2-react/list-box/how-to/form-submit">Form Submit</a></li>
16341634
<li><a href="/ej2-react/list-box/how-to/select-items">Select Items</a></li>
1635+
<li><a href="/ej2-react/list-box/how-to/filter-listbox">Filter ListBox Data Using TextBox Component</a></li>
16351636
</ul>
16361637
</li>
16371638
<li><a href="https://ej2.syncfusion.com/react/documentation/api/list-box/">API Reference</a></li>

‎ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
4+
import { Query } from '@syncfusion/ej2-data';
5+
function App() {
6+
let listboxobj;
7+
let data = [
8+
{ text: 'Hennessey Venom', id: 'list-01' },
9+
{ text: 'Bugatti Chiron', id: 'list-02' },
10+
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
11+
{ text: 'SSC Ultimate Aero', id: 'list-04' },
12+
{ text: 'Koenigsegg CCR', id: 'list-05' },
13+
{ text: 'McLaren F1', id: 'list-06' },
14+
{ text: 'Aston Martin One- 77', id: 'list-07' },
15+
{ text: 'Jaguar XJ220', id: 'list-08' },
16+
{ text: 'McLaren P1', id: 'list-09' },
17+
{ text: 'Ferrari LaFerrari', id: 'list-10' },
18+
];
19+
const handleFilterChange = (event) => {
20+
if (listboxobj) {
21+
listboxobj.filter(data, new Query().where('text', 'contains', event.target.value, true));
22+
}
23+
};
24+
return (
25+
<div className="e-section-control">
26+
<label>Enter Text: </label>
27+
<input type="text" id="filterTextBox" onInput={handleFilterChange} placeholder="Enter text to filter" />
28+
<h4>Select your favorite car:</h4>
29+
<ListBoxComponent
30+
id="listbox"
31+
dataSource={data}
32+
ref={(scope) => listboxobj = scope}
33+
/>
34+
</div>);
35+
}
36+
export default App;
37+
ReactDOM.render(<App />, document.getElementById('sample'));

‎ej2-react/code-snippet/listbox/filter-listbox-cs1/app/index.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
3+
4+
import * as React from 'react';
5+
import * as ReactDOM from 'react-dom';
6+
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
7+
import { Query } from '@syncfusion/ej2-data';
8+
9+
function App() {
10+
let listbox: ListBoxComponent;
11+
let data: { [key: string]: Object }[] = [
12+
{ text: 'Hennessey Venom', id: 'list-01' },
13+
{ text: 'Bugatti Chiron', id: 'list-02' },
14+
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
15+
{ text: 'SSC Ultimate Aero', id: 'list-04' },
16+
{ text: 'Koenigsegg CCR', id: 'list-05' },
17+
{ text: 'McLaren F1', id: 'list-06' },
18+
{ text: 'Aston Martin One- 77', id: 'list-07' },
19+
{ text: 'Jaguar XJ220', id: 'list-08' },
20+
{ text: 'McLaren P1', id: 'list-09' },
21+
{ text: 'Ferrari LaFerrari', id: 'list-10' },
22+
];
23+
24+
const handleFilterChange = (event: any) => {
25+
if (listbox) {
26+
listbox.filter(data, new Query().where('text', 'contains', event.target.value, true));
27+
}
28+
};
29+
30+
return (
31+
<div className="e-section-control">
32+
<label>Enter Text: </label>
33+
<input type="text" id="filterTextBox" onInput={handleFilterChange} placeholder="Enter text to filter"/>
34+
<h4>Select your favorite car:</h4>
35+
<ListBoxComponent
36+
id="listbox"
37+
dataSource={data}
38+
ref={(scope) => listbox = scope}
39+
/>
40+
</div>
41+
);
42+
}
43+
export default App;
44+
ReactDOM.render(<App />, document.getElementById('sample'));
45+
46+
47+

‎ej2-react/code-snippet/listbox/filter-listbox-cs1/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Syncfusion React ListBox</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Essential JS 2 for React Components" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" />
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
15+
<script src="systemjs.config.js"></script>
16+
<style>
17+
#loader {
18+
color: #008cff;
19+
height: 40px;
20+
left: 45%;
21+
position: absolute;
22+
top: 45%;
23+
width: 30%;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<div id='sample' style="margin: 20px auto 0; width:250px;">
30+
<div id='loader'>Loading....</div>
31+
</div>
32+
</body>
33+
34+
</html>

‎ej2-react/code-snippet/listbox/filter-listbox-cs1/systemjs.config.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
System.config({
2+
transpiler: "ts",
3+
typescriptOptions: {
4+
target: "es5",
5+
module: "commonjs",
6+
moduleResolution: "node",
7+
emitDecoratorMetadata: true,
8+
experimentalDecorators: true,
9+
"jsx": "react"
10+
},
11+
meta: {
12+
'typescript': {
13+
"exports": "ts"
14+
}
15+
},
16+
paths: {
17+
"syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
18+
},
19+
map: {
20+
app: 'app',
21+
ts: "https://unpkg.com/[email protected]/lib/plugin.js",
22+
typescript: "https://unpkg.com/[email protected]/lib/typescript.js",
23+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
24+
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
25+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
26+
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
27+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
28+
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
29+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
30+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
31+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
32+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
33+
34+
"@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
35+
"@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
36+
"@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
37+
"react-dom": "https://unpkg.com/[email protected]/umd/react-dom.production.min.js",
38+
"react": "https://unpkg.com/[email protected]/umd/react.production.min.js",
39+
},
40+
packages: {
41+
'app': { main: 'index', defaultExtension: 'tsx' },
42+
}
43+
44+
});
45+
46+
System.import('app');

‎ej2-react/list-box/how-to/filter-listbox.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
layout: post
3+
title: Filter List box Data Using TextBox component | Syncfusion
4+
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.
5+
control: ListBox Filter
6+
platform: ej2-react
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# How to Filter ListBox Data Using TextBox Component
12+
13+
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.
14+
15+
{% tabs %}
16+
{% highlight js tabtitle="index.jsx" %}
17+
{% include code-snippet/listbox/filter-listbox-cs1/app/index.jsx %}
18+
{% endhighlight %}
19+
{% highlight ts tabtitle="index.tsx" %}
20+
{% include code-snippet/listbox/filter-listbox-cs1/app/index.tsx %}
21+
{% endhighlight %}
22+
{% endtabs %}
23+
24+
{% previewsample "page.domainurl/code-snippet/listbox/filter-listbox-cs1" %}

0 commit comments

Comments
 (0)