layui 的SELECT 下拉框 添加lay-search只能匹配已有的列表数据

额外添加如下操作 实现能实时新增

HTML代码

<form class="layui-form"  id="form" >
    <div class="layui-form-item" id="group" >
<label class="layui-form-label">配置分组:</label>
<div class="layui-input-block">
<select name="group" lay-filter="group" lay-search>
{loop $groups $k $v}
<option value="{$v}" {if $setting && $setting['group']==$v} selected {/if}>{$v}</option>
{/loop}
</select>
</div>
    </div>
</form>

用唯一标记 ID 包括外层容器 这里是group

JS 函数实现

function handleSelectPop(conselector, fn) {
    $(conselector).on('keydown', '.layui-select-title input', function(event) {
        if (event.keyCode == 13) {
            //回车键 新增
            $('body').click();
            var options = $(conselector + ' select').children('option');
            var html = '';
            $.each(options, function(i, e) {
                var cur_value = $(e).val();
                if (window.new_value == cur_value) {
                    //没有新增的项
                    window.new_value = "";
                    html += '<option value="' + cur_value + '" selected>' + cur_value + '</option>';
                } else {
                    html += '<option value="' + cur_value + '" >' + cur_value + '</option>';
                }
            });
            if (window.new_value != "") {
                html += '<option value="' + window.new_value + '" selected>' + window.new_value + '</option>';
            }
            $(conselector + ' select').empty().append(html);
            form.render('select');
        } else {
            $(conselector + ' select').next().find('.layui-anim-upbit .layui-disabled').text('没有选项 按回车键新增');
            $(conselector + ' select').next().find('.layui-anim-upbit .layui-select-none').text('没有选项 按回车键新增');
        }
        if (fn!=undefined){
fn();
}
    });
    $(conselector).on('input', '.layui-select-title input', function(event) {
        //keydown 无法获取input最新值 需要在该事件中监听
        window.new_value = $(this).val();
    });
}

JS调用 可以增加回调处理后续业务

handleSelectPop('#group');