有关选择选项的正文下方的其他信息

Question

我曾经select2生成我的选择选项列表,如下面的代码段.

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

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

<div class="form-group">
    <label>Minimal</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected">Alabama</option>
        <option>Alaska</option>
        <option>California</option>
        <option>Delaware</option>
        <option>Tennessee</option>
        <option>Texas</option>
        <option>Washington</option>
    </select>
</div>
       
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

我想要的是,主要文本下面的一个潜台词也可以搜索.当我想用值搜索选项时Alabama,我只需要键入Okay1,但另一方面我想只搜索值Alabama.除了select2支持这种行为的选项库之外,是否还有其他插件？(下面是我对结果的预期图像)

我尝试过类似下面的代码,但它没有那么好用:

<div class="form-group">
    <label>Minimal</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected">Alabama&nbsp&nbsp<h4 style="color: grey">Okay1</h4></option>
        <option>Alaska&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option>
        <option>California&nbsp&nbsp<h4 style="color: grey">Okay2</h4></option>
        <option>Delaware&nbsp&nbsp<h4 style="color: grey">Okay3</h4></option>
        <option>Tennessee&nbsp&nbsp<h4 style="color: grey">Okay4</h4></option>
        <option>Texas&nbsp&nbsp<h4 style="color: grey">Okay5</h4></option>
        <option>Washington&nbsp&nbsp<h4 style="color: grey">Okay6</h4></option>
    </select>
</div>

Answer 1

你可以:

• 将secondary属性编码为<option>元素的属性
• 使用自定义搜索功能,请参阅matchCustom下面的代码段
• 使用自定义格式化程序功能,请参见formatCustom下文

工作示例,使用状态mottos作为存储的辅助属性data-foo,您可以按州名或座右铭搜索:

$(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 $(
        '<div><div>' + state.text + '</div><div class="foo">'
            + $(state.element).attr('data-foo')
            + '</div></div>'
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>
<style>
.foo { color: #808080; text-size: smaller; }
</style>

<div class="form-group">
    <label>Minimal</label>
    <select class="form-control select2" style="width: 100%;">
        <option selected="selected" data-foo="We dare to defend our rights">Alabama</option>
        <option data-foo="North to the Future">Alaska</option>
        <option data-foo="Eureka">California</option>
        <option data-foo="Liberty and Independence">Delaware</option>
        <option data-foo="Agriculture and Commerce">Tennessee</option>
        <option data-foo="Friendship">Texas</option>
        <option data-foo="Bye and bye">Washington</option>
    </select>
</div>
       
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

Answer 2

我会使用Bootstrap-select。这是一个很棒的图书馆，已经可以做你想做的每一件事。无需像他们说的那样重新发明轮子！

您也可以立即搜索标题和描述。

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-group ">
                <label>Minimal</label>
                <select class="selectpicker form-control" data-live-search="true" title="Search title or description...">
                    <option data-subtext="description 1">Alaska</option>
                    <option data-subtext="description 2">California</option>
                    <option data-subtext="description 3">Delaware</option>
                    <option data-subtext="description 4">Tennessee</option>
                    <option data-subtext="description 5">Texas</option>
                    <option data-subtext="description 6">Washington</option>
                </select>
            </div>
        </div>
    </div>
</div>

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;
}

这是一个带有一些自定义的小提琴