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'},
            ]
        });