フロントエンド-"Layui-ドロップダウンマルチ選択ボックス拼音あいまい一致

最初に効果について話さないでください:

この効果は、formselect4を使用して完了するlayuiに基づいており、いくつかの必要条件は次のとおりです。

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の部分

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

おすすめ

転載: blog.csdn.net/nienianzhi1744/article/details/94364816