layui,下拉框模糊搜索功能

最新推荐文章于 2025-03-19 16:22:51 发布

请问你是水呢

最新推荐文章于 2025-03-19 16:22:51 发布

阅读量1.2w

点赞数 2

分类专栏： layui 文章标签： layui 下拉框

layui 专栏收录该内容

6 篇文章

订阅专栏

原文地址：https://www.cnblogs.com/weiyangoo/articles/7097123.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<form class="layui-form" action="">
<div class="layui-inline">
      <label class="layui-form-label">搜索选择框</label>
      <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search="">
          <option value="">直接选择或搜索选择</option>
          <option value="1">layer</option>
          <option value="2">form</option>
          <option value="3">layim</option>
          <option value="4">element</option>
          <option value="5">laytpl</option>
          <option value="6">upload</option>
          <option value="7">laydate</option>
          <option value="8">laypage</option>
          <option value="9">flow</option>
          <option value="10">util</option>
          <option value="11">code</option>
          <option value="12">tree</option>
          <option value="13">layedit</option>
          <option value="14">nav</option>
          <option value="15">tab</option>
          <option value="16">table</option>
          <option value="17">select</option>
          <option value="18">checkbox</option>
          <option value="19">switch</option>
          <option value="20">radio</option>
        </select>
      </div>
    </div>
  </div>
  </form>
  <script src="layui/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('form',function(){});<!--加载form模块-->
</script>
</body>
</html>

注意：layui表单的使用依赖加载模块：form，所以一定要在末尾加上

<script>
//Demo
layui.use('form', function(){
  var form = layui.form();
  
  //do something
  
});
</script>

如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能

layui,下拉框模糊搜索功能

总结，如果是已经在用layui的，忽略上面的内容，只要给 select 标签加个 lay-search="" 属性就可以实现搜索选择