Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Add ui-select with search filter in admin form magento2

    If in your application you want to add an ui-select in your ui-form with a search filter, then you can use following process:

    First you need to a field in your ui-form:

    <field name="customer" component="Webkul_Test/js/components/select-customer" sortOrder="20" formElement="select">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filterOptions" xsi:type="boolean">true</item>//to add filter in select-ui
                <item name="multiple" xsi:type="boolean">false</item>//select multiple or not
                <item name="showCheckbox" xsi:type="boolean">true</item>
                <item name="disableLabel" xsi:type="boolean">true</item>
                <rule name="required-entry" xsi:type="boolean">true</rule>
            <label translate="true">Select Customer</label>//label to Field
            <dataScope>data.customer</dataScope>//To map
                <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
                    <options class="Webkul\Test\Ui\Component\Create\Form\Customer\Options"/>

    Now create Js file to map the fields value:


    ], 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.set('newOption', option);
             * Normalize option object.
             * @param {Object} data - Option object.
             * @returns {Object}
            parseData: function (data) {
                return {
                    value: data.customer.entity_id,

    Now create file to get options to display in select:


    namespace Webkul\Test\Ui\Component\Create\Form\Customer;
    use Magento\Framework\Data\OptionSourceInterface;
    use Magento\Customer\Model\ResourceModel\Customer\CollectionFactory as CustomerCollectionFactory;
    use Magento\Framework\App\RequestInterface;
     * Options tree for "Categories" field
    class Options implements OptionSourceInterface
         * @var \Magento\Customer\Model\ResourceModel\Customer\CollectionFactory
        protected $customerCollectionFactory;
         * @var RequestInterface
        protected $request;
         * @var array
        protected $customerTree;
         * @param CustomerCollectionFactory $customerCollectionFactory
         * @param RequestInterface $request
        public function __construct(
            CustomerCollectionFactory $customerCollectionFactory,
            RequestInterface $request
        ) {
            $this->customerCollectionFactory = $customerCollectionFactory;
            $this->request = $request;
         * {@inheritdoc}
        public function toOptionArray()
            return $this->getCustomerTree();
         * Retrieve categories tree
         * @return array
        protected function getCustomerTree()
            if ($this->customerTree === null) {
                $collection = $this->customerCollectionFactory->create();
                foreach ($collection as $customer) {
                    $customerId = $customer->getEntityId();
                    if (!isset($customerById[$customerId])) {
                        $customerById[$customerId] = [
                            'value' => $customerId
                    $customerById[$customerId]['label'] = $customer->getName();
                $this->customerTree = $customerById;
            return $this->customerTree;

    After this a select-ui with search filter will be displayed on your form.


    Hope, this will help you to implement your functionality.

    Thank you.

    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again