Additional info below the main text on select option

Question

I used select2 to produce my select option list like the snippet below.

$(function(){
    $(".select2").select2();
})





    Minimal

What I want is, a subtext below the main text that searchable too. when i want to search the option with value Alabama, I just need to type Okay1, but in the other hand I want to search with value Alabama only. Are there any plugins other than select2 option library that support this kind of behavior ? ( Below is the image that i expected for the result )

I have tried like the code below, but it didn't work that well :


    Minimal

user_6730571 · Answer

You could:

encode the secondary property as an attribute of the element
use a custom search function, see matchCustom in snippet below
use a custom formatter function, see formatCustom below

Working example, using state mottos as secondary attribute stored in data-foo, you can search by state name or motto:

$(function(){
    $(".select2").select2({
        matcher: matchCustom,
        templateResult: formatCustom
    });
})

function stringMatch(term, candidate) {
    return candidate && candidate.toLowerCase().indexOf(term.toLowerCase()) >= 0;
}

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;
    }
    // Match text of option
    if (stringMatch(params.term, data.text)) {
        return data;
    }
    // Match attribute "data-foo" of option
    if (stringMatch(params.term, $(data.element).attr('data-foo'))) {
        return data;
    }
    // Return `null` if the term should not be displayed
    return null;
}

function formatCustom(state) {
    return $(
        '' + state.text + '
'
            + $(state.element).attr('data-foo')
            + ''
    );
}







    Minimal

user_3447218 · Answer

I would use Bootstrap-select. It's a great library and already does every thing you want. No need to reinvent the wheel as they say!

You can search on both the title and description right out the box too.

CSS

.dropdown-menu > li > a {
    font-weight: 700;
    padding: 10px 20px;
}

.bootstrap-select.btn-group .dropdown-menu li small {
    display: block;
    padding: 6px 0 0 0;
    font-weight: 100;
}

Here is a fiddle with a little bit of customisation

Additional info below the main text on select option

2 Answers