html – 选择选项主文本下面的附加信息

概述我使用select2来生成我的选择选项列表,如下面的代码段. $(function(){ $(".select2").select2();}) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudfla 我使用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 >    <label>Minimal</label>    <select  >        <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 >    <label>Minimal</label>    <select  >        <option selected="selected">Alabama&nbsp&nbsp<h4 >Okay1</h4></option>        <option>Alaska&nbsp&nbsp<h4 >Okay2</h4></option>        <option>California&nbsp&nbsp<h4 >Okay2</h4></option>        <option>Delaware&nbsp&nbsp<h4 >Okay3</h4></option>        <option>Tennessee&nbsp&nbsp<h4 >Okay4</h4></option>        <option>Texas&nbsp&nbsp<h4 >Okay5</h4></option>        <option>Washington&nbsp&nbsp<h4 >Okay6</h4></option>    </select></div>

解决方法 你可以：

>将secondary属性编码为< 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 >'            + $(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 >    <label>Minimal</label>    <select  >        <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>

总结

以上是内存溢出为你收集整理的html – 选择选项主文本下面的附加信息全部内容，希望文章能够帮你解决html – 选择选项主文本下面的附加信息所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。