xm-select多選下拉框實現拼音、首字母搜索匹配

由於公司要求：需要實現下拉框拼音搜索功能。
關於layui-select的實現方式已經有了，地址：https://fly.layui.com/jie/26761/
由於本人還使用了 xm-select 多選下拉框。在上面大佬提供方法的基礎下。實現xm-select多選下拉框拼音搜索匹配功能。
基礎：引用 pinyin.js 和 initials.js。在引用 layui.js 和 xm-select.js
相關代碼的解釋我就不多說了。可以去看上面大佬的講解。我的代碼如下：
1、html 代碼：

<div class="layui-inline">
      <label class="layui-form-label">多選下拉框：</label>
      <div class="layui-input-inline">
         <div id="test"></div>
      </div>
 </div>

2、js 代碼：

//搜索過濾器
        var myFilter_xmSel = function (value, text, id) {
           //value：輸入值; text：option的text值；id：option的value值；
            var result;
            if (escape(value).indexOf("%u") != -1) { //漢字
                result = text.indexOf(value) > -1;
            } else {
                var len = value.length;
                result = ConvertPinyin(text).substring(0, len) === value || makePy(text)[0].toLowerCase().substring(0, len) === value || text.toLowerCase().indexOf(value) > -1 || (id === undefined ? false : id.indexOf(value) > -1);
            }
            return result;
        };
//多選下拉框初始化
        let xmSel = xmSelect.render({
            el: '#test',
            filterable: true,//開啟搜索
            filterMethod: function (val, item, index, prop) {//重寫搜索方法。
                if (val == item.value) {//把value相同的搜索出來
                    return true;
                }
                if (item.name.indexOf(val) != -1) {//名稱中包含的搜索出來
                    return true;
                }
                return myFilter_xmSel(val, item.name, item.value);
            },
            paging: true,//開啟分頁
            pageSize: 5,//每頁條數
            name: 'test',
            layVerify: 'required',
            toolbar: {
                show: true,
            },
            data: [
               //這里填自己的下拉框選項值; 
               {name: '水果', value: '1'},
               {name: '玩具', value: '2'},
               {name: '作業', value: '1'},
            ]
        });