选择选项的主要文本下方的附加信息

Question

我使用select2 生成我的选择选项列表，如下面的 sn-p。

$(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

你可以：

• 将次要属性编码为<option>元素的属性
• 使用custom search 函数，参见下面的sn-p 中的matchCustom
• 使用custom formatter 函数，参见下面的formatCustom

工作示例，使用存储在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;
}

Here is a fiddle with a little bit of customisation