2.7K Star 16.1K Fork 3.6K

GVPLayui/layui

 / 详情

能不能在选择框上加上可输入可下拉可搜索

已完成
创建于  
2023-05-10 14:29

说明

  • 版本: 2.8.2(必填)
  • 描述: 能不能在选择框上加上可输入可下拉可搜索(必填)

代码

<div class="layui-form layui-row layui-col-space16" id="is_body">
  <div class="layui-col-md6">
    <select lay-search=""  lay-filter="demo-select-filter" class="inputandsearch">
      <option value="">请选择或搜索(默认不区分大小写)</option>
      <option value="1">AAA</option>
      <option value="2">aaa</option>
      <option value="3">BBB</option>
      <option value="4">bbb</option>
      <option value="5">ABC</option>
      <option value="6">abc</option>
      <option value="7">AbC</option>
    </select>
  </div>
</div>
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.$
  var id = 'is_body'
  // 监听inputvalue
    $('#' + id + '').on('input', '.inputandsearch + .layui-form-select .layui-select-title input', function (event) {
            var input = $(this)
            var inputvalue = input.val();
            let 根节点 = input.parent().parent().parent()
            let 假下拉容器 = 根节点.find('dl')

            // 判断是否有匹配选项 没有就显示inputvalue
            if (假下拉容器.find('.layui-select-none').length > 0) {
                if (假下拉容器.find('.is_select_text').length > 0) {
                    假下拉容器.find('.is_select_text').text(inputvalue)
                    假下拉容器.find('.is_select_text').attr('lay-value', inputvalue)
                } else {
                    假下拉容器.prepend(`<dd lay-value="${inputvalue}" class="is_select_text">${inputvalue}</dd>`)
                }
            }
    });

        // 监听自定义选项被选中
        $('#' + id + '').on('click', '.is_select_text', function () {
            let inputvalue = $(this).attr('lay-value')
            let 根节点 = $(this).parent().parent().parent()
            let 真下拉容器 = 根节点.find('select')
            layer.msg(inputvalue); // this 为当前选中 <option> 元素对象
            真下拉容器.append(`<option value="${inputvalue}">${inputvalue}</option>`)
            真下拉容器.val(inputvalue);
            form.render('select')
			
        });
  // select 事件
  form.on('select(demo-select-filter)', function(data){
    var elem = data.elem; // 获得 select 原始 DOM 对象
    var value = data.value; // 获得被选中的值
    var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
    
    layer.msg(this.innerHTML + ' 的 value: '+ value); // this 为当前选中 <option> 元素对象
  });
});
</script>

@贤心

评论 (3)

1271058326 创建了任务
1271058326 修改了描述
展开全部操作日志

有个inputSelect插件可以搜索也可以输入

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

贤心 任务状态待办的 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(3)
92529 sentsin 1578917144
JavaScript
1
https://gitee.com/layui/layui.git
git@gitee.com:layui/layui.git
layui
layui
layui

搜索帮助

A270a887 8829481 3d7a4017 8829481