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

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

需求

网页端实现动态搜索选择框，要求：

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

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

3. 基于 Layui。

方案

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

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

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

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

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

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

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

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

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

  实现

  效果如下：

  示例代码如下：

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

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

          Demo       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'}    ];  }}); 

    小结

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

    ---

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

    帮忙点个「分享」或者「在看」吧！

    ⬇️⬇️⬇️