Hi Tarek AS,
Greetings from Syncfusion support!
We have reviewed your query regarding the option to add a filter (search bar) to dropdowns within the InPlaceEditor component in JavaScript. We are pleased to inform you that it is indeed possible to enable the filtering option for the DropDownList when integrated with the In-place editor component.
Please refer to the code snippet below:
|
let dropObj: InPlaceEditor = new InPlaceEditor({
mode: 'Inline',
type: 'DropDownList',
value: 'Canada',
model: {
dataSource: autocompleteData,
placeholder: 'Find a country',
allowFiltering: true,
filterBarPlaceholder: 'Search here!',
},
});
dropObj.appendTo('#dropdownEle');
|
In the code snippet provided, we have enabled the "allowFiltering" option in the Model configuration section, which allows users to filter the dropdown options. You can find a runnable sample at the following link:
Sample: https://stackblitz.com/edit/rkdgqj-bfvsfu?file=index.ts,index.html
For more detailed information, please refer to our documentation: InPlace Editor Controls - Model Configuration
Should you require further assistance or have any additional questions, please feel free to reach out.
