Layui选择框拼音模糊搜索 (包括原始select、formSelects-v4的多选select)

一、Layui原始select解决

1.问题

layui的下拉框 select自带一个搜索功能，但是真正使用的时候，大部分场景是中文的，这就导致中文匹配不是很方便，更方便的还是拼音模糊搜索，网上有比较成熟的pinyin.js，所以本次文章所解决的是layui自带搜索实现拼音模糊搜索

  
    用户
    张三
    李四
    王武
    赵六
    马云
    马化腾
  

原始效果

2.定位(可跳过)

我们先找到影响的代码部分，form.js，发现这是压缩版的：

所以我们可以下载一个源码版的，在Layui官网的下载页面下有码云链接，可以点进去下载对应form.js的源码https://gitee.com/sentsin/layui/blob/master/src/lay/modules/form.js

然后找到关键判断代码：

3.解决

手写新的判断逻辑：

var pinyinFilter = function(value, text, id) {
    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;
};

// escape(value).indexOf("%u")用来判断是否是中文

引用在之前form.js中关键代码部分：

4.检验

二、layui多选select（formSelects-v4）

1.原始效果

代码：

  
    用户
    张三
    李四
    王武
    赵六
    马云
    马化腾
  

2.定位

我们查看formSelects-v4.js，定位关键位置

3.解决

准备好判断代码（与之前基本一样）

var pinyinFilter_forV4 = function(value, text, id) {
    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;
};

对应位置引入：

4.检验

检验