layui怎么关闭下拉框自带的搜索过滤

雨浩大大_3408

雨浩大大_3408

2026-08-23

824人浏览

原创

lay-search="false"可关闭搜索框,但需配合form.render('select')生效,且必须置于form.layui-form内,否则属性不被识别;留空或不写等价于true,删属性无效。

layui怎么关闭下拉框自带的搜索过滤

lay-search 属性设为 false 就能关掉搜索框

直接在 <select></select> 标签里写 lay-search="false",不是删掉属性,也不是留空——留空或不写等价于 true。这个开关只控制搜索输入框是否渲染,不涉及数据过滤逻辑。

常见错误是以为删掉 lay-search 就行,结果发现下拉框还是带搜索框;或者写成 lay-search="",这在 2.9.16+ 版本里会被当默认开启处理。

  • lay-search="false":彻底不渲染搜索输入框,DOM 里找不到 .layui-input
  • lay-search 或 lay-search="":开启默认搜索(前缀匹配 + 不区分大小写)
  • lay-search="{fuzzy: true}":仅限 2.9.16+,开启子串匹配,但仍是搜索模式

form.render('select') 必须调用,否则禁用无效

即使写了 lay-search="false",如果页面是动态插入的 <select></select>,或者你改了属性后没刷新表单,Layui 仍可能沿用旧渲染结果。原因在于:Layui 的 select 是基于原生元素生成的模拟 DOM,lay-search 只在 form.render() 时读取一次。

所以,改完属性后必须显式调用:

layui.use(['form'], function(){
  var form = layui.form;
  // 修改 lay-search 属性后
  form.render('select');
});

注意:form.render('select') 不能在 layui.use 外调用,也不能在 DOM 尚未就绪时调用(比如 $(document).ready 之前)。

已开启搜索又想临时关闭?JS 动态移除更稳妥

运行时想切开关,别只改属性,得连带清理已生成的搜索输入框 DOM。否则 lay-search="false" 生效了,但界面上还残留一个不可用的 .layui-input。

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

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

下载

推荐做法:

  • 先用 $('select').attr('lay-search', 'false') 更新属性
  • 再调用 form.render('select')
  • 最后手动删掉残留输入框:$('select').siblings('.layui-form-select').find('.layui-input').remove()

这三步缺一不可。只做前两步,在某些版本(如 2.8.x)里会留下空白区域;只删 DOM 不改属性,下次 form.render() 又会重建。

为什么 search: false 在 select.render() 里不管用

select.render() 的 search: false 是 Layui 3.0+ 的新 API,当前主流版本(2.8–2.9)的 select.render 不识别这个配置项。你在 select.render({ elem: '#xxx', search: false }) 里写它,Layui 会静默忽略,照样渲染搜索框。

真正生效的只有 HTML 属性 lay-search="false" + form.render('select') 这个组合。别被文档片段误导——有些示例混用了不同版本的 API。

最容易被忽略的是:哪怕你用的是 2.9.16+,只要没把 <select></select> 放在 form.layui-form 容器内,lay-search 属性根本不会被扫描到,自然也就关不掉。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2560

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2393

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

80

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

80

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

40

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

40

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

60

15

热门下载

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

精品课程

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

共87课时 | 12.7万人学习

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

共89课时 | 10.9万人学习

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

共5课时 | 1.6万人学习