前端——》Layui-下拉多选框拼音模糊匹配

话不多说先看效果：

此效果是基于layui使用formselect4完成的，实现的几个必要条件是

1，开启select的属性

2，引入正确的js（这个着实找了大半天）

3，复制粘贴jquery代码

不足之处望提意见。

------------------------分割线-------------------------------

html部分

<label class="layui-form-label">省份</label>
<div class="layui-input-block">
    <!--xm-select是下拉多选框的id,xm-select-search-type="dl"表示文字搜索框放置的位置，提前须开启xm-select-search-->
    <select xm-select="regionSelect" xm-select-direction="down" xm-select-search xm-select-search-type="dl">
    </select>
</div>

js部分

<!--具体的js地址已上传到头顶资源处，鼠标滚轮往上滑，下载后引入-->
<script type="text/javascript" src="../assets/js-pinyin.js"></script>

JQuery部分

扫描二维码关注公众号，回复： 12224767 查看本文章

function loadProvince(del, curr) {
            $.ajax({
                url: "../assets/city.json",
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    var arr = [];
                    $(res).each(function (idx, value) {
                        arr.push({
                            name: value.province,
                            type: "optgroup"
                        })
                        $(value.city).each(function (id, val) {
                            arr.push({
                                    name: val.city_name,
                                    value: val.city_name,
                                    province:value.province
                                }
                            )
                        })
                    });
                 
                    formSelects.data('regionSelect', 'local', {
                        arr: arr
                    });
                    formSelects.value('regionSelect', curr);
                    /*过滤*/
                    formSelects.filter('regionSelect', function(id, inputVal, val, isDisabled){
                        if(
                           /*这段代码是检查省份是否包含*/
                           PY.fullPY(val.province).toLowerCase().indexOf(inputVal) != -1 ||    //拼音全拼是否包含
                           PY.fullPY(val.province, true).indexOf(inputVal) != -1 ||            //拼音简拼是否包含
                           val.province.indexOf(inputVal) != -1||
                           /*这段代码是检查城市是否包含*/
                           PY.fullPY(val.name).toLowerCase().indexOf(inputVal) != -1 ||    //拼音全拼是否包含
                           PY.fullPY(val.name, true).indexOf(inputVal) != -1 ||            //拼音简拼是否包含
                           val.name.indexOf(inputVal) != -1                                //文本是否包含
                        ){
                            return false;
                        }
                        /*return true表示选项被过滤，隐藏不显示*/
                        return true;
                    });
                }
            })
        }