How to Make a Custom Selector Using JetSmart Filter Plugin and Select2 Library

Creating a custom selector using the JetSmart Filter plugin and the Select2 library can enhance the user experience on your website by providing a more intuitive and visually appealing interface. Here’s a step-by-step guide to help you achieve this:

Step 1: Include Select2 Library

First, you need to include the Select2 library in your project. Add the following lines to your HTML file to include the necessary CSS and JS files:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

Step 2: Initialize Select2 on JetSmart Filter

Next, you need to initialize the Select2 library on the JetSmart Filter’s sorting select element. Use the following JavaScript code to achieve this:

jQuery(document).ready(function($) {
    function initSelect() {
        jQuery('.elementor-widget-jet-smart-filters-sorting select').select2({
            minimumResultsForSearch: -1
        });
    }
    initSelect();
});

Step 3: Customize the Selector’s Appearance

To customize the appearance of the selector, you can use CSS to change the background images for different states (e.g., focus, blur). Here’s an example:

var down = {
    "background-image": "url(/wp-content/uploads/2024/09/chevron-down.svg)"
};
var up = {
    "background-image": "url(/wp-content/uploads/2024/09/chevron-up.svg)"
};
var item = jQuery('.jet-sorting-select');

jQuery(item).on({
    "change": function() {
        jQuery(this).blur();
        item.css(down);
    },
    "focus": function() {
        item.css(up);
    },
    "blur": function() {
        item.css(down);
    },
});

Step 4: Add some styles

selector {
    min-width: 250px;
}

.sortFilterBlock .select2-selection--single {
    position: relative;
    height: 60px;
    border-radius: 8px;
    border: 1px solid #0F0E0E !important;
}

.sortFilterBlock .jet-sorting-select {
      background-image: url("/wp-content/uploads/2024/09/chevron-down.svg");
      background-position: right 15px center;
      background-size: 14px;
      background-repeat: no-repeat;
}
   
.sortFilterBlock .select2-selection {
    font-family: "Marcellus";
    font-size: 16px !important;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: #475467 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    border: 1px solid #D0D5DD !important;
    border-radius: 8px !important;
    height: 60px !important;
     padding: 16px 30px 16px 16px !important; 
     background-color: #ffffff;
}

.sortFilterBlock .select2-selection:hover {
    /*color: #ffffff !important;*/
    /*background-color: #81baca;*/
    -webkit-transition: all .3s;
  transition: all .3s;
}

.sortFilterBlock .select2-selection:after {
    content: "";
    position: absolute;
    top: 48%;
    right: 15px;
    width: 0;
    height: 0;
    border: solid #0F0E0E;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.sortFilterBlock .select2-selection:hover:after {
    /*border-color: #fff;*/
    -webkit-transition: all .3s;
  transition: all .3s;
}

.sortFilterBlock .select2-container--open .select2-selection:after,
selector .jet-dropdown-open .jet-filter-items-dropdown__label::after {
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -2px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.sortFilterBlock .select2-container {
    width: 100% !important;
}

.select2-container.select2-container--open {
    margin: 12px 0 !important;
}

.select2.select2-container--open {
    margin: 0 !important;
}

.sortFilterBlock .select2-selection__rendered {
    color: #475467 !important;
    padding: 0 !important;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.sortFilterBlock .select2-selection:hover .select2-selection__rendered {
    /*color: #ffffff !important;*/
    -webkit-transition: all .3s;
    transition: all .3s;
}

.sortFilterBlock .select2-selection__arrow {
    display: none !important;
}

.select2-results__option {
    font-family: "Be Vietnam Pro" !important;
    font-size: 16px !important;
    font-weight: 400;
    text-transform: normal;
    line-height: 21px !important;
    text-align: left;
    color: #475467;
    padding: 15px 12px !important;
    -webkit-transition: all .3s;
    transition: all .3s;
} 

.select2-dropdown .select2-results__option:first-child {
    display: none;
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 350px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #81baca !important;
    background-color: #fff !important;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff !important;
}
    
.select2-container--open .select2-dropdown {
    background: #ffffff;
    padding: 8px 8px;
    border-radius: 2px !important;
    border: 1px solid #D0D5DD !important;
    overflow: hidden;
    top: -1px;
}


@media only screen and (max-width: 1024px) {
    .sortFilterBlock .select2-container {
       width: 100%;
    }
    
    .sortFilterBlock .select2-selection {
        height: 60px !important;
    }
    
    .sortFilterBlock .select2-selection__rendered {
        font-size: 12px !important;
        line-height: 20px;
    }
}


@media only screen and (max-width: 767px) {
    
    .select2-results__option {
        font-size: 14px !important;
    } 
    
    .select2-container--open .select2-dropdown {
    top: -15px;
}
}