layui select怎么实现可输入搜索（带搜索功能的下拉框）-Layui教程-PHP中文网

layui select 默认不支持搜索，需在标签添加lay-search属性并配合lay-filter及form.render()方可启用；远程搜索须改用lay-ui的select组件并配置request和parseData。

layui select怎么实现可输入搜索（带搜索功能的下拉框）

layui select 默认不支持搜索，必须用 `lay-select` + `lay-search`

layui 原生 select 组件本身没有搜索能力，直接加 lay-search 属性才是启用搜索的唯一方式。很多人卡在这一步：写了 lay-search 却没效果，原因通常是漏了 lay-filter 或没调用 form.render()。

关键点：

lay-search 必须写在标签上，不是 上
必须有 lay-filter，否则 form 模块无法识别该下拉框


DOM 渲染后必须执行 form.render('select')（或不传参数的 form.render()）
搜索是前端本地过滤，不触发 Ajax；如需远程搜索，得换 lay-ui 的 select + 自定义模板 + request 配置（见下节）
搜索失效的常见错误和修复方式
典型现象：输入文字没反应、下拉选项不收缩、回车没提交、按方向键失灵。
检查以下几处：

是否误把 lay-search 写成 lay-search="true"？正确写法是 lay-search（无值或空值即可）
是否用了 disabled 或 readonly？带 lay-search 的 select 不支持这两个属性，会禁用搜索框
是否在 form.on('select(xxx)') 中手动清空了 value？这会导致搜索框失去焦点后值被重置
是否在 select 外层加了 display: none 或 visibility: hidden？lay-search 依赖 DOM 尺寸计算，隐藏后首次点击可能错位

需要远程搜索时，不能用原生 select，得改用 lay-ui 的 select + request

layui 2.8+ 的 lay-ui（即新版 layui）提供了增强版 select，支持 request 和 parseData。但注意：它和老版 layui.form 不兼容，不能混用。
示例结构（需引入 lay-ui.js 和对应 CSS）：

											
												
												
													深蓝色网站后台管理系统layui框架模板-AdminPro
													一款深蓝色网站后台管理系统layui框架模板
												
												下载
												
											
										
<div id="remoteSelect"></div>

<script>
layui.use(['select'], function(){
  var select = layui.select;
  select.render({
    elem: '#remoteSelect',
    url: '/api/options?q=',
    request: {
      pageName: 'page', // 若后端分页参数名不是 page，要改这里
      limitName: 'limit'
    },
    parseData: function(res){
      return {
        code: res.code === 0,
        msg: res.msg,
        count: res.total,
        data: res.data || []
      };
    },
    done: function(res, curr, count){
      // 可在此处理渲染完成逻辑
    }
  });
});
</script>
要点：


url 必须是完整接口地址，且支持拼接关键词（如 q=xxx）

parseData 是必须的，用来适配你后端返回格式
搜索框输入时，会自动在 url 后追加 ?q=xxx&page=1&limit=10 类似参数
老项目若还在用 layui.form，强行接入此方案会导致表单事件冲突，建议统一升级或封装隔离

移动端搜索体验差？重点调 searchInput 的样式和事件
默认搜索框在 iOS Safari 或安卓微信里经常光标错位、键盘弹出慢、输入卡顿。根本原因是 layui 把搜索框插入到 select 的 after 伪元素中，而移动端对伪元素内 input 支持不稳定。
临时缓解办法（不改源码）：

给 select 加 style="font-size: 16px;"，避免 iOS 缩放触发
监听 focus 事件，在 100ms 后手动 focus 到搜索 input（需先用 document.querySelector('.layui-select-search input') 找到它）
禁用长按复制：给搜索 input 加 oncontextmenu="return false" 和 onselectstart="return false"

如果项目允许，直接换 input + ul 自实现下拉（配合 autocomplete="off" 和防抖请求），比硬啃 layui 的移动端搜索更可控

真正想稳，就得接受一个事实：layui 的 lay-search 是为 PC 表单设计的，它的搜索框本质上是个“套壳 input”，在复杂交互或强兼容性要求下，容易成为瓶颈。