layui下拉框怎么实现拼音首字母搜索-Layui教程-PHP中文网

layui下拉框原生不支持拼音首字母搜索，需引入pinyin-pro库并监听搜索框input事件，将输入转为拼音首字母后手动匹配显示option，同时需重绘下拉面板并注意移动端兼容性问题。

layui下拉框怎么实现拼音首字母搜索

layui下拉框原生不支持拼音首字母搜索

layui 的 select 组件（包括 form.select 渲染后的下拉）默认只支持完整字符串匹配，输入“zhang”能搜到“张三”，但输入“z”或“zh”就完全没反应——这不是配置漏了，是底层没实现拼音解析逻辑。

要让下拉支持“输首字母即匹配”，必须自己接管搜索行为，绕过 layui 默认的 filter 机制。

用 `lay-search` + 自定义 `filter` 回调实现

核心思路：启用 lay-search 属性触发搜索框，再通过 form.on('select(...)', ...) 拦截输入事件，把用户输入转成拼音首字母后手动匹配 option 元素。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

必须引入拼音库，推荐轻量级的 pinyin-pro（比 tiny-pinyin 更准，支持多音字首字母）：
```
<script src="https://unpkg.com/pinyin-pro@3.12.0/dist/index.umd.min.js"></script>
```

给 select 添加 lay-search，并绑定自定义 filter：

<select id="userSelect" lay-filter="userSelect" lay-search><option value="">请选择</option>
<option value="1">张三</option>
<option value="2">李四</option>
<option value="3">王五</option></select>

在 form.on('select(userSelect)') 外，单独监听搜索框的 input 事件（layui 不暴露搜索框 DOM，得用委托）：

layui.use(['form', 'jquery'], function(){
  var form = layui.form,
      $ = layui.jquery;

  // 等待 select 渲染完成
  setTimeout(function(){
    // 监听 .layui-select-title 下的 input（layui 生成的搜索框）
    $('.layui-form-select').on('input', '.layui-select-title input', function(){
      var val = $(this).val().trim();
      if(!val) return;

      var $options = $('#userSelect option:gt(0)'); // 跳过默认项
      var firstLetter = pinyinPro(val, { type: 'first' }).toLowerCase();

      $options.hide();
      $options.each(function(){
        var text = $(this).text();
        var pinyinFirst = pinyinPro(text, { type: 'first' }).toLowerCase();
        if(pinyinFirst.indexOf(firstLetter) === 0) {
          $(this).show();
        }
      });

      // 强制重绘下拉面板（layui 不自动更新可见选项）
      $('.layui-form-select dl').scrollTop(0);
    });
  }, 100);
});

注意下拉面板不会自动收缩，需手动控制显隐

上面代码只控制 option 显示/隐藏，但 layui 的下拉面板（.layui-form-select dl）仍保持展开状态，且滚动条位置错乱。常见表现是：输“z”后只看到“张三”，但面板底部空白、无法滚动。

每次过滤后，要主动触发一次 form.render('select')，否则新显示的 option 不参与 layui 内部渲染逻辑
更稳妥的做法是：清空 dl，重新拼接 dd，再调用 form.render() —— 否则隐藏的 option 在 DOM 中仍存在，可能被键盘上下键选中
输入为空时，务必恢复所有 option 可见，否则后续搜索会累积隐藏状态