Answers for "jquery select plugin"


jquery select plugin

//place css in head
<link href="[email protected]/dist/css/select2.min.css" rel="stylesheet" /> 

//Place it before closing body tag above the below code 
<script src="" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="[email protected]/dist/js/select2.min.js"></script>

//script below should be placed before body closing tag or in seprate script file
$(document).ready(function() {

    function matchCustom(params, data) {
        // If there are no search terms, return all of the data
        if ($.trim(params.term) === '') {
            return data;

        // Do not display the item if there is no 'text' property
        if (typeof data.text === 'undefined') {
            return null;

        // `params.term` should be the term that is used for searching
        // `data.text` is the text that is displayed for the data object
        if (data.text.indexOf(params.term) > -1) {
            var modifiedData = $.extend({}, data, true);
            modifiedData.text += ' (matched)';

            // You can return modified objects from here
            // This includes matching the `children` how you want in nested data sets
            return modifiedData;

        // Return `null` if the term should not be displayed
        return null;

        matcher: matchCustom

//Customizing the css are these classes
// This is for input 
.select2-container--default .select2-selection--single {
    background-color: #ebebeb;
    border-radius: 10px;
    padding: 14px 24px 14px 24px;
    border: 1px solid #dcdee1;
    color: #73777fb3;
    min-height: 57px;
    width: 100%;
    font-size: 18px;
//This is for arrow position
.select2-selection__arrow {
    top: -7px;
    margin-top: auto;
    margin-bottom: auto;
    bottom: 0;
    right: 15px !important;
Posted by: Guest on February-22-2021

Code answers related to "Javascript"

Browse Popular Code Answers by Language