Frontend——"Layui-Drop-down multi-select box pinyin fuzzy matching

Let's not talk about the effect first:

This effect is based on layui using formselect4 to complete, several necessary conditions are

1. Turn on the properties of select

2. Introduce the correct js (this is really looking for a long time)

3. Copy and paste the jquery code

I hope to comment on the shortcomings.

------------------------Dividing line------------------------ -------

html part

<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 part

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

JQuery part

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;
                    });
                }
            })
        }