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

### 说明

- 版本： 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>

```
 @sentsim

GVP Layui/layui

内容风险标识

评论 (3)

GVPLayui/layui

内容风险标识