Magento 2 Add select-box with search/filter option

Question

I would like to add select-box with search/filter option. Is it possible, Magento ui-components provide this kind of functionality? If so, how to achieve this?

Now I am working with Product Entity - adding an attribute programmatically. A new attribute was added by InstallData setup class. Input and source were specified like this:

'input' => 'select', 'source' => 'Vendor\ModuleName\Model\Attribute\Source\Data'

Desirable effect:

Answer 1

Yes you can

Define the options you need to display

<item name="options" xsi:type="object">Namespace\Modulename\Model\Config\Source\Options</item>

Rest Magento will handle Full code

<field name="field_name">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Namespace\Modulename\Model\Config\Source\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Field Name</item>
            <item name="componentType" xsi:type="string">field</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">field_name</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="chipsEnabled" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">false</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="listens" xsi:type="array">
                <item name="newOption" xsi:type="string">toggleOptionSelected</item>
            </item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="source" xsi:type="string">conditions</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>  

Answer 2

After Magento 2.2 you can add a searchable dropdown using the below code.

 <field name="category" sortOrder="50" formElement="select">
    <argument name="data" xsi:type="array">
    <item name="options" xsi:type="object">Namespace\Modulename\Model\Source\Category</item>
    <item name="config" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
        <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
        <item name="filterOptions" xsi:type="boolean">true</item>
        <item name="showCheckbox" xsi:type="boolean">true</item>
        <item name="chipsEnabled" xsi:type="boolean">true</item>
        <item name="multiple" xsi:type="boolean">false</item>
        <item name="disableLabel" xsi:type="boolean">true</item>
    </item>
    </argument>
    <settings>
     <label translate="true">Category</label>
     <validation>
        <rule name="required-entry" xsi:type="boolean">true</rule>
     </validation>
    </settings>
</field>

Answer 3

Did anyone find solution? I am trying to add search filter in a custom form, with this code. Can anyone guide what am I missing here?

$baseFieldset->addField(
            'magento_id',
            'select',
            [
                'label' => __('Magento Product1'),
                'title' => __('Magento Product2'),
                'name' => 'magento_id',
                'required' => true,
                'options' => $Mage_Product
            ]
        );