lay-search仅支持本地选项过滤,无法实现百度式实时联想;必须用input+keydown+防抖+动态ul渲染替代,手动处理ajax请求、键盘导航、焦点管理及表单同步。
直接用 lay-search 属性不能实现类似百度的实时联想——它只做本地 <select></select> 选项过滤,不支持远程请求、防抖、键盘导航或动态渲染建议项。
为什么 lay-search 满足不了“百度式联想”
lay-search 是 Layui 对原生 <select></select> 的增强,本质是把输入值当作关键词,在已渲染的 <option></option> 中做 indexOf 匹配并显隐。它不具备以下能力:
- 输入时发起 AJAX 请求拉取新数据(比如用户输“北”,后端返回“北京”“北海”“北戴河”)
- 对高频输入做防抖(否则每敲一个字都发请求)
- 支持上下键切换高亮项、回车确认、ESC 关闭
- 建议项 DOM 是动态生成的,不是静态
<option></option>
所以,真要类百度体验,必须手写逻辑,绕过 lay-search。
input + keydown + 防抖 + 动态 ul 渲染(核心四步)
用一个 <input> 承担输入和展示,用绝对定位的 <ul></ul> 承担下拉建议列表,所有交互自己控制:
- 监听
input事件:获取当前值,触发防抖(推荐setTimeout+ 清除上一次 timer,延迟 300ms) - 防抖回调里调
$.ajax或fetch,参数传$(this).val(),后端返回数组如[{id:1,title:"北京"},{id:2,title:"北海"}] - 成功后清空并重绘
<ul></ul>,每个<li>绑定data-id和显示文本 - 同时监听
keydown:捕获e.keyCode === 38(上)、40(下)、13(回车)、27(ESC),维护currentIndex并更新li.active样式
注意:<ul></ul> 必须设 position: absolute、z-index: 999,且父容器不能有 overflow: hidden,否则被裁掉。
调用百度PaddleOCR‑VL大模型API,支持PDF、Word、PPT、图片等多格式文档解析,精准识别印刷体、手写体、表格、公式、图表、印章等复杂元素,支持100+语言,可处理不规则布局和跨页长文档。触发词:文档解析、VLM解析、大模型OCR、PaddleOCR、多模态文档、手写识别、公式识别、复杂版面。
与 layui.form.verify 冲突怎么办
用户点选建议项后,你用 $input.val(text) 赋值,但 form.verify 不会自动感知这个变化,提交时仍校验旧值或报“未填写”。解决方法很明确:
- 选中建议后,立刻调
form.val('formFilter', {fieldName: value}),强制同步表单内部状态 - 如果该字段有自定义验证规则(比如调接口查唯一性),需手动再触发一次验证:
form.verify('fieldName')或在回调里重跑校验逻辑 - 避免对同一
<input>多次绑定oninput—— Layui 的form.on('input', ...)会覆盖前一个监听器,统一用 jQuery 的.on('input', ...)管理
容易被忽略的 DOM 和焦点细节
最常卡住的地方不在逻辑,而在 DOM 层级和浏览器行为:
- 下拉
<ul></ul>必须紧跟<input>的父容器,且该容器设position: relative,否则定位漂移 - 点击建议项时,要
e.preventDefault()阻止默认行为,否则可能触发表单提交或跳转 - 鼠标移入
<li>时,应同步更新currentIndex,否则键盘导航和鼠标操作状态不一致 - 失焦时(
blur),要延时关闭下拉列表(setTimeout(..., 200)),否则点不到<li>
这些细节不处理,用户会觉得“有时能选、有时点不动、方向键没反应”——问题不在代码功能,而在交互链路断点。










