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

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>

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