Search/Filter Touch UI Dialog Dropdown in AEM

Sometimes we have a requirement that needs to populate the dynamic list in the touch UI dialog dropdown. We can achieve populating the dynamic list in dialog easily for example https://helpx.adobe.com/experience-manager/using/creating-granite-datasource.html but what if the list is too long, assume we need to create a dialog dropdown to choose color and color list having approximate 148 items (https://www.w3schools.com/colors/colors_names.asp )
So it’s quite tough for the content author to scroll the dropdown to select the appropriate value.

What can be done to reduce efforts for content author:
Is it possible to have a kind of In-place search dropdown where the content author can type the character and the drop-down list will only show relevant value?
The answer is Yes, It is possible.

How:
This can be achieved by modifying the existing dropdown node:

Replacing sling:resourceType value from ‘select’ to 'autocomplete' component (/libs/granite/ui/components/coral/foundation/form/autocomplete)
Create ‘options’ nodes parallel to ‘datasource’ node and create sling:resourceType property with granite/ui/components/coral/foundation/form/autocomplete/list value for ‘options’ node

That’s it. Find more info about the autocomplete component at Autocomplete

Example dialog:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Promo Box"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<tabs
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/tabs">
<items jcr:primaryType="nt:unstructured">
<contentdata
jcr:primaryType="nt:unstructured"
jcr:title="Content"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<heading
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="Enter Promo Box Heading"
fieldLabel="Heading"
name="./heading"/>
<background
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"
emptyText="---- Please Select a Value -----"
fieldDescription="Select Background colour from Dropdown"
fieldLabel="Select or type background colour from Dropdown"
name="./bg-color"
required="{Boolean}true">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="/apps/blog/dailog/dropdown"/>
<options
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>
</background>
</items>
</column>
</items>
</contentdata>
</items>
</tabs>
</items>
</content>
</jcr:root>

Dropdown with all items




Dropdown with Filter/Search