Add select box with search bar in uiComponent form Magento 2

Suppose we have a list of some 1000 customers, and we need to add customers list to our UI form. It is really a hectic task to search a customer by scrolling down the select box options list.

So here comes the use of search box inside select box. Use the following code to add select box field in your UI form.

<field name="customer" component="Vishesh_SelectBox/js/select-category" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="showCheckbox" xsi:type="boolean">false</item>
                    <item name="disableLabel" xsi:type="boolean">true</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
            <settings>
                <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
                <label translate="true">Select Customer</label>
                <dataScope>customer</dataScope>
                <componentType>field</componentType>
                <listens>
                    <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
                </listens>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="Vishesh\SelectBox\Ui\Component\Form\Customers"/>
                    </settings>
                </select>
            </formElements>
        </field>

To make the above code work, you need to create two files, one is js component file ,i.e., Vishesh_SelectBox/js/select-category and other is source model class which provides the options list ,i.e., Vishesh\SelectBox\Ui\Component\Form\Customers.

So lets create the files.

Vishesh_SelectBox/js/select-category will be created on the path Vishesh/SelectBox/view/adminhtml/web/js/select-category.js

define([
    'Magento_Ui/js/form/element/ui-select'
    ], function (Select) {
    'use strict';
    return Select.extend({
        /**
         * Parse data and set it to options.
         *
         * @param {Object} data - Response data object.
         * @returns {Object}
         */
        setParsed: function (data) {
            var option = this.parseData(data);
            if (data.error) {
                return this;
            }
            this.options([]);
            this.setOption(option);
            this.set('newOption', option);
        },
        /**
         * Normalize option object.
         *
         * @param {Object} data - Option object.
         * @returns {Object}
         */
        parseData: function (data) {
            return {
                value: data.customer.entity_id,
                label: data.customer.name
            };
        }
    });
});

Vishesh/SelectBox/Ui/Component/Form/Customers.php

That's all, our field working with a search box.