Magento 2.4 admin grid add select filter with search

Question

Good afternoon community, does anyone by chance know how I can add a select type filter to an adminhtml table grid and that additional internally include a search to filter options? As you can see in the image that I put as an example, until now I have only managed to create the select filter, but without the search, I leave an image of the code that I use.

Example

Code

Thanks fot your attention

Answer 1

You can try to clone the Asset dropdown. It is defined in vendor/magento/module-media-gallery-ui/view/adminhtml/ui_component/product_listing.xml

and it looks like this

<listingToolbar name="listing_top">
    <filters name="listing_filters">
          <filterSelect
            name="asset_id"
            provider="${ $.parentName }"
            sortOrder="10"
            class="Magento\MediaGalleryUi\Ui\Component\Listing\Filters\Asset"
            component="Magento_Ui/js/grid/filters/elements/ui-select"
            template="Magento_MediaGalleryUi/grid/filters/elements/ui-select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="entityType" xsi:type="string">catalog_product</item>
                    <item name="identityColumn" xsi:type="string">entity_id</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="searchOptions" xsi:type="boolean">true</item>
                    <item name="filterPlaceholder" xsi:type="string" translate="true">Asset Title</item>
                    <item name="emptyOptionsHtml" xsi:type="string" translate="true">Start typing to find assets</item>
                    <item name="filterRateLimit" xsi:type="string" translate="true">1000</item>
                    <item name="filterRateLimitMethod" xsi:type="string" translate="true">notifyWhenChangesStop</item>
                    <item name="searchUrl" xsi:type="url" path="media_gallery/asset/search" />
                    <item name="validationUrl" xsi:type="url" path="media_gallery/asset/getSelected"/>
                    <item name="levelsVisibility" xsi:type="number">1</item>
                </item>
            </argument>
            <settings>
                <caption translate="true">– Please Select assets –</caption>
                <label translate="true">Asset</label>
                <dataScope>asset_id</dataScope>
                </settings>
        </filterSelect>
    </filters>
</listingToolbar>