Typeahead functionality in AEM dropdown component

[Keerthi97]

Hi Team ,

 We have a long list of dropdown values in our component .So , we would like to integrate the  typeahead function in the dropdown to filter out the list to get to the one that the content author wants to select .Could anyone please help me with any references or ideas on it .

Thanks in Advance!

[lukasz-m · Accepted solution]

Hi @Keerthi97,

If I good understand you need this functionality in authoring interface. There are few options you could consider.

1. You can use OOTB coral2 autocomplete widget. It is deprecated however it's still used in some AEM OOTB functionalities - so I think it could be considered as a short term option. The implementation of this widget can be found under: /libs/granite/ui/components/coral/foundation/form/autocomplete
   Example of usage, can be find under /libs/dam/content/searchpanel/header/items/savedsearchesfield, and this is how it looks in action - this is Saved Searches option in DAM filters:
   
2. The other, long term option (and recommended) will be to create custom widget base on foundation-autocomplete. As an implementation example you can refer to authorizable autocomplete, code can be found under /libs/granite/ui/components/coral/foundation/authorizable/autocomplete. Usage can be find in top right corner when you trying to use Impersonate as option.