Magento 2: Searchable drop-down

Searchable drop-down component with Jquery Plugin

Following example shows the steps to use Select2 Jquery Plugin in Magento 2 admin form.

Stesps :

1. Download the required files from Repository

https://github.com/select2/select2/tree/4.1.0-rc.0

2. Add the required files in magento 2 module

In view/adminhtml/web/js folder

Add the downloaded select2.js in above folder

In view/adminhtml/web/css folder

Add the select2.css file under above folder

In required-config.js

var config = {
    map: {
        '*': {
            
            dropdownSearchSelector:  'Vasan_Bidding/js/dropdown-search-selector'

        }
    },
    shim: {
        'dropdownSearchSelector': {
            deps: ['jquery']
        }
    },
    };

In layout xml file

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
<!--        <css src="css/select2.min.css" rel="stylesheet" type="text/css"  />-->
        <css src="Vasan_Bidding::css/select2.css" order="999" />
    </head>
    
    ..................
</page>

3. If the Js file is directly used in phtml

.............

<select class="control-select2" >
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
</select>

.....................


<script type="text/javascript">
    require(['jquery', 'dropdownSearchSelector', 'domReady!'],function($){
        'use strict';

        $(function() {
           
            $('.control-select2').select2({});
        });
    });
</script>