Request Quote

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.

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