html - 选择选项正文下方的附加信息

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

你可以:

将次要属性编码为 <option> 的属性元素

使用 custom search功能，见 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>