select2中文选项通过拼音或者首字母快速定位选项

原文:http://blog.csdn.net/u012906135/article/details/70568932

使用select2的时候,想通过拼音或者首字母检索下拉的选项,但是又没有通过ajax等技术去实现

这时候可以试试用这种伪方法~

这种方法的好处就是快、方便使用

默认select2如图:

 

代码:

<div>
<select name="test" id="test">
    <option value="1">王者荣耀|wangzherongyao|wzry</option>
    <option value="2">部落冲突|buluochongtu|blct</option>
    <option value="3">枪战王者|qiangzhanwangzhe|qzwz</option>
    <option value="4">永恒纪元|yonghengjiyuan|yhjy</option>
    <option value="5">英魂之刃|yinghunzhiren|yhzr</option>
    <option value="6">皇室战争|huangshizhanzheng|hszz</option>
    <option value="7">一起来飞车|yiqilaifeiche|yqlfc</option>
    <option value="8">海岛奇兵|haidaoqibing|hdqb</option>
    <option value="9">阴阳师|yinyangshi|yys</option>
    <option value="10">热血江湖|rexuejianghu|rxjh</option>
</select>
</div>
<script>
    $('#test').select2({
        width:150,
        allowClear: true,
        formatResult: function (item) {
            var str = item.text;
            var idx = str.indexOf('|');
            return str.substring(0,idx);
        },
        formatSelection: function (item) {
            var str = item.text;
            var idx = str.indexOf('|');
            return str.substring(0,idx);
        },
        placeholder: '--请选择--'
    });
</script>

效果图: 

 

demo下载地址:

demo.zip

 

posted @ 2018-01-08 13:13  Zeroes  阅读(861)  评论(0)    收藏  举报