讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui表单select如何根据输入的内容模糊匹配后端数据

大磊酱_4341

大磊酱_4341

发布时间:2026-04-30 06:07:27

|

624人浏览过

|

来源于php中文网

原创

Layui select 搜索框默认不触发后端请求,需配置 lay-search="{ remote: true, url: '/api/select-options' }" 才启用远程搜索,且后端必须返回含 data 字段的标准 JSON、支持 trim 和分页。

select 搜索框不触发后端请求?检查 lay-search 是否带配置对象

默认的 lay-search 只做前端 dom 选项过滤,不会发请求。要让它联动后端,必须用 layui 2.9.16+ 的新写法:lay-search="{ remote: true, url: '/api/select-options' }"。这个配置会让 select 在输入时自动携带 q 参数(如 /api/select-options?q=杭州)发起 get 请求。旧版只写 lay-search 或 lay-search="" 都不会触发远程调用。

后端接口返回格式必须严格匹配 Layui 要求

Layui 的 remote 模式要求后端返回标准 JSON 格式,且字段名固定为 data,不能是 list、options 或其他别名:

{
  "code": 0,
  "msg": "",
  "data": [
    { "value": "1", "title": "杭州市西湖区" },
    { "value": "2", "title": "杭州市拱墅区" }
  ]
}

常见错误包括:

  • 返回数组直接包在根节点(没套 data 字段)→ 下拉列表空白
  • 用 value 和 text 做键名 → Layui 不识别,需改用 value + title
  • 接口返回 200 但 code !== 0 → Layui 当作失败,不渲染选项

输入中文或带空格时匹配不到?后端需做 trim + LIKE 处理

用户输入“ 杭州 ”(前后有空格),前端会原样传 q=%E6%9D%AD%E5%B7%9E,后端若不做 trim(),数据库 LIKE 查询就会失效。正确做法是:

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

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

下载
  • Java:用 StringUtils.trimToEmpty(q) 再拼 "%" + q + "%"
  • MyBatis-Plus:用 query.like("area_name", "%" + q.trim() + "%"),别用 eq
  • Node.js:用 q = req.query.q?.trim() || "",再进 SQL

注意:Layui 不会自动去空格,也不支持正则,一切清洗和模糊逻辑必须由后端承担。

搜索结果重复、卡顿或加载不完?确认是否启用了分页与缓存

remote 模式默认不限制返回条数,如果后端一次返回 5000 条,select 下拉框会卡死甚至崩溃。必须加服务端分页:

  • 接口 URL 改为 /api/select-options?q={q}&page=1&limit=20
  • 响应中 data 只放当前页数据,总数可选填 count 字段供 Layui 显示“共 XX 条”
  • 前端输入连续变化时(如打字“杭州湾”),Layui 会自动 abort 上一个请求,但后端仍建议加简单缓存(如 Redis 缓存 5 分钟内相同 q 的结果)

真实业务中,超过 100 条选项就该强制分页;否则用户根本没法滚动选择,也容易误点。

热门AI工具

更多
墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2443

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6310

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

5686

2024.03.19

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2443

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5263

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6310

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5878

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

843

2024.05.22

VibeKnow知识视频制作与导出详解
VibeKnow知识视频制作与导出详解

本专题整理VibeKnow从注册、素材上传、AI生成到预览导出的完整操作,帮助新手快速制作第一条知识讲解视频。

0

2026.10.14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn