layui没有lay-search组件,需用input监听input事件配合layer.tips实现搜索建议,注意防抖、中文输入法兼容、浮层管理及回车选中等细节。

layui 的 lay-search 不是原生支持的组件
layui 官方并没有叫 lay-search 的内置模块,也没有开箱即用的“搜索框+下拉建议”复合组件。你看到的百度式搜索建议效果,得靠 input + autocomplete 逻辑 + layer(或原生 div)手动实现,核心依赖是 layui.form 的事件监听和 layui.layer 的浮层控制。
用 input 监听 input 事件而非 blur 或 change
搜索建议必须实时响应用户输入,blur 太迟,change 在失去焦点前不触发,只有 input 事件能捕获每一次键入(包括删除、粘贴、中文输入法上屏后)。
百度热榜监控 | Baidu Hot Topics Monitor. 获取百度热搜榜、搜索趋势、关键词热度 | Get Baidu trending searches, trends, keyword popularity. 触发词:百度、热搜、baidu.
- 务必给 input 元素加
autocomplete="off",否则浏览器自带下拉会和你的建议层冲突 - 建议加防抖:用
setTimeout+clearTimeout控制请求频率,避免每敲一个字就发一次请求 - 中文输入法场景下,要在
compositionstart和compositionend事件里暂停/恢复建议逻辑,否则拼音阶段就触发建议会出错
建议列表用 layer.tips 而非 layer.open
layer.open 是模态弹窗,位置固定、遮罩干扰强;搜索建议需要紧贴 input 底部、无遮罩、点击外部自动关闭——layer.tips 更合适,它本质是带箭头的轻量浮层。
- 调用时传入 input 的 DOM 节点(不是 jQuery 对象),例如:
layer.tips(html, elem[0], {tips: [2, '#fff']}) - 每次新请求返回数据前,先执行
layer.close(tipsIndex)清掉旧浮层,否则会堆叠 - 不要在 tips 内部放表单控件(如
input、select),layer.tips 的 z-index 和 focus 行为对交互支持较弱,建议用绝对定位div自行管理
选中建议项后要同步更新 input 值并触发搜索
用户点击某条建议,不能只改 input 的 value,还要主动触发业务搜索动作(比如提交表单、调接口),否则只是“看起来选中了”。
- 给建议列表的每个
li绑定 click 事件,获取文本后赋值给 input:inputElem.val(item.text) - 立刻调用
inputElem.trigger('input'),确保监听逻辑知道值已变(尤其防抖计时器需重置) - 如果建议项带 ID 等元信息,别只塞文本进 input,可存到
data-id属性里,后续搜索直接读取,避免二次查表 - 按回车键选中高亮项?需监听 input 的
keydown,判断e.keyCode === 13,再读取当前高亮li的内容

















