1
2//place css in head
3<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> 
4
5
6//Place it before closing body tag above the below code 
7<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
8 <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
9
10
11//script below should be placed before body closing tag or in seprate script file
12<script>
13$(document).ready(function() {
14
15
16    function matchCustom(params, data) {
17        // If there are no search terms, return all of the data
18        if ($.trim(params.term) === '') {
19            return data;
20        }
21
22        // Do not display the item if there is no 'text' property
23        if (typeof data.text === 'undefined') {
24            return null;
25        }
26
27        // `params.term` should be the term that is used for searching
28        // `data.text` is the text that is displayed for the data object
29        if (data.text.indexOf(params.term) > -1) {
30            var modifiedData = $.extend({}, data, true);
31            modifiedData.text += ' (matched)';
32
33            // You can return modified objects from here
34            // This includes matching the `children` how you want in nested data sets
35            return modifiedData;
36        }
37
38        // Return `null` if the term should not be displayed
39        return null;
40    }
41
42
43    $(".search-select").select2({
44        matcher: matchCustom
45    });
46    //$('.search-select').select2();
47});
48</script>
49
50
51//Customizing the css are these classes
52// This is for input 
53.select2-container--default .select2-selection--single {
54    background-color: #ebebeb;
55    border-radius: 10px;
56    padding: 14px 24px 14px 24px;
57    border: 1px solid #dcdee1;
58    color: #73777fb3;
59    min-height: 57px;
60    width: 100%;
61    font-size: 18px;
62}
63//This is for arrow position
64.select2-selection__arrow {
65    top: -7px;
66    margin-top: auto;
67    margin-bottom: auto;
68    bottom: 0;
69    right: 15px !important;
70}
71
72
73