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