前端|基于 Layui 实现动态搜索选择框

简介: 网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。

后端程序员的前端笔记,含金量,你懂的 😛

需求

网页端实现动态搜索选择框,要求:

  1. 下拉选项列表能根据用户输入内容动态刷新;

  2. 最终提交的值必须是由选项列表中点选的;

  3. 基于 Layui。

方案

一开始根据印象里常见的搜索选择框的样式,一直在探索如何基于 <select> 来实现。Layui 的搜索选择框并没有暴露监听输入内容的事件接口,在网上找到了两个思路,但实现得都不够完美。

一是参考 https://www.cnblogs.com/zqifa/p/layui-select-input-1.html,在 <select> 上覆盖一个 <input>,监听 <input> 的输入内容然后触发模糊搜索,进而触发更新 <select> 的选项列表。可以基本达成需要的效果,有一个问题是选择列表展示后,必须选择一项才能关闭选项列表,而期望是点击空白区域选项列表自动关闭。

二是参考 https://gitee.com/layui/layui/issues/I6N5MZ,监听经过 Layui 渲染 <select> 后生成的 <input> 元素的事件,进而触发选项列表的刷新。这个方案的思路是挺好的,但是同样有一些小问题,比如下拉选项的展示/隐藏、输入焦点、输入内容保持等,都需要自己一一去干预。

这时在 Layui 的仓库找到 这个 Issue,贤心大大这样回应网友「能不能在选择框上加上可输入可下拉可搜索」的提问:

select 组件的定位就是只能赋值选项列表中的值,包括搜索,也只是从选项中匹配。若要支持自定义输入的值,可以借助 input + dropdown 组件来自定义实现哦。

受此启发,我又思考了一下需求里的「搜索」:

  • 我们的下拉选项列表完全由后端根据输入内容返回;

  • Layui 的 select 搜索选择框的搜索,是根据输入内容匹配现有候选列表,纯前端行为;

看了下 Layui 文档后发现 dropdown 有专门的 reloadData 的 API,经尝试后最终选择了基于 Layui 的 dropdown 组件来实现。

实现

效果如下:

图片

示例代码如下:

  • 其中 mockData 实现应按需替换成 ajax 请求,成功拿到数据之后再 reloadData

  • 表单提交时需要使用 id 作为参数值,可以在 click 的时候给 input 添加自定义属性如 data-id,在输入监听事件里删除该属性值。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="https://unpkg.com/layui@2.9.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-inline layui-padding-5">
  <input name="" placeholder="请搜索或选择" class="layui-input" id="ID-dropdown-demo">
</div>

<script src="https://unpkg.com/layui@2.9.6/dist/layui.js"></script> 
<script>
layui.use(function(){
  var dropdown = layui.dropdown;
  var $ = layui.$;
  var inst = dropdown.render({
    elem: '#ID-dropdown-demo',
    data: [],
    click: function(obj){
      this.elem.val(obj.title);
      this.elem.attr('data-id', obj.id)
    }
  });

  $(inst.config.elem).on('input propertychange', function() {
    var elem = $(this);
    var value = elem.val().trim();
    elem.removeAttr('data-id');

    var dataNew = mockData(value);
    dropdown.reloadData(inst.config.id, {
      data: dataNew
    })
  });

  $(inst.config.elem).on('blur', function() {
    var elem = $(this);
    var dataId = elem.attr('data-id');
    if (!dataId) {
        elem.val('');
    }
  });

  function mockData(value) {
    return [
      {id: 1, title: value + '1'},
      {id: 2, title: value + '2'}
    ];
  }
});
</script>

</body>
</html>
AI 代码解读

小结

冷静地想清楚自己的需求和场景,有助于更快找到合适的组件和方案。


如果读完文章有收获,可以关注我的微信公众号「闷骚的程序员」并🌟设为星标🌟,随时阅读更多内容。

目录
打赏
0
2
3
0
58
分享
相关文章
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
325 14
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
layui在上传图片在前端处理图片压缩
layui在上传图片在前端处理图片压缩
188 0
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
1325 0
前端框架Layui实现动态树效果(书籍管理系统左侧下拉列表)(二)
前端框架Layui实现动态树效果(书籍管理系统左侧下拉列表)(二)
76 0
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(上)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
82 10
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(下)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
90 9
基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
本文介绍了一个基于Python的哔哩哔哩数据分析系统,该系统使用Flask框架、MySQL数据库、echarts数据可视化技术和Layui前端框架,旨在提取和分析哔哩哔哩用户行为数据,为平台运营和内容生产提供科学依据。
414 9

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    33
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    5
  • 4
    详解智能编码在前端研发的创新应用
    21
  • 5
    巧用通义灵码,提升前端研发效率
    17
  • 6
    智能编码在前端研发的创新应用
    17
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    13
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    25
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    13
  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    22
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    60
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    4
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    65
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    31
  • 7
    巧用通义灵码,提升前端研发效率
    96
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    148
  • 9
    详解智能编码在前端研发的创新应用
    107
  • 10
    智能编码在前端研发的创新应用
    84