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

enter image description here

Code

enter image description here

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>

• GStiven: Thanks it's just what I needed
• GStiven: Do you happen to know how I can load default options? The select always starts empty
• Marius: I have no idea. I think that's the point of it. to start empty so to lazy load the options