一、Layui原始select解决

1.问题

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

<div class="layui-input-inline">
  <select name="userId" id="userId" lay-search>
    <option value="">用户</option>
    <option value="001">张三</option>
    <option value="002">李四</option>
    <option value="003">王武</option>
    <option value="004">赵六</option>
    <option value="005">马云</option>
    <option value="006">马化腾</option>
  </select>
</div>

原始效果

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.原始效果

代码：

<div class="layui-input-inline form-values" style="width: 500px;">
  <select name="userId" id="userId" xm-select="xmUserIdSelect" xm-select-search="" lay-search>
    <option value="">用户</option>
    <option value="001">张三</option>
    <option value="002">李四</option>
    <option value="003">王武</option>
    <option value="004">赵六</option>
    <option value="005">马云</option>
    <option value="006">马化腾</option>
  </select>
</div>


<script>
    //全局定义一次, 加载formSelects
    layui.config({
        base: '${base_path}/static/js/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
  
  
    layui.use('formSelects', function() {
        var formSelects = layui.formSelects;
        // 下拉多选
        formSelects.on('xmUserIdSelect', function (id, vals, val, isAdd, isDisabled) {}, true);
    });
</script>

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.检验

检验