Select2 選項框的聯想匹配實現

使用基於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"
            }
            ....
        ]
    }
}
複製程式碼