Select2 选项框的联想匹配实现

最新推荐文章于 2023-03-06 17:35:09 发布

weixin_33916256

最新推荐文章于 2023-03-06 17:35:09 发布

阅读量707

点赞数 1

文章标签： json javascript ViewUI

原文链接：https://juejin.im/post/5b19ed206fb9a01e76291134

版权

使用基于jquery的select2插件

html 页面代码

<select id="productName"></select>
复制代码

js 逻辑代码

$.ajax({
    url: "/api/v1/product/name/list?type=1",
    success: function(data) {
        $("#productName").select2({
            matcher: function (params, data) {
                if($.trim(param.term) === "") {
                    return data;
                }
                var myTerm = $.trim(params.term);
                if(data.text.toLowerCase().indexOf(myTerm.toLowerCase()) > -1) {
                    return data;
                }
                return null;
            },
            placeholder: "请输入产品名称",
            multiple: true,
            maximumSelectionLength: 1,
            data: data.data.productNameList,
            language: {
                noResults: function() {
                    return: "找不到相关数据"
                },
                maxiumSelected: function() {
                    return "只能输入一个选项"
                }
            }
        });
    }
})
复制代码

后台返回的数据JSON格式

{
    "status": "ok",
    "data": {
        "productNameList": [
            {
                "id": "pdt01",
                "text": "产品1"
            },
            {
                "id": "pdt02",
                "text": "产品2"
            }
            ....
        ]
    }
}
复制代码