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

来源:互联网 发布:通俗理解互补滤波算法 编辑:程序博客网 时间:2024/06/11 17:00
使用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


0 0
原创粉丝点击