xm-select多选下拉框实现拼音、首字母搜索匹配

前言

最近项目中遇到需要下拉框能实现根据首字母进行模糊搜索,下拉框使用的是xm-select,而xm-select支持中文的搜索,后端接口也仅支持中文的。因此需要借助其他插件来完成功能。

准备工作

  1. layui.js
  2. pinyin.js
  3. initials.js
  4. xm-select.js

代码

  1. 自定义搜索过滤器
typescript 复制代码
//搜索过滤器
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;
 };
  1. 下拉框初始化
typescript 复制代码
 let xmSel = xmSelect.render({
    el: '#sel',
    name: 'sel',
    model: {
        label: {
            type: 'text'
        }
    },
    radio: true,
    //选中关闭
    clickClose: true,
    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);
    },
    data:[你的数据]
})
相关推荐
墨菲安全11 分钟前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing13 分钟前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆13 分钟前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding1 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机2 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人2 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景2 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾2 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉3 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html