Question

我使用select2生成我的选择选项列表，如下面的代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

我想要的是，主要文本下方的子文本也可以搜索。当我想要搜索值为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

工作示例，使用状态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;
}

Here is a fiddle with a little bit of customisation

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

2 个答案: