当 layui 的 select 下拉框 搜索不存在的项目时新建该项

默认选项

image.png

新建不存在项

image.png

image.png

可以看到下拉选项多了刚刚新建的 项

image.png

需要在 select 外面套个 元素，并添加类"layui-select-add-new"

<div class="layui-select-add-new">
                            <select class="layui-select" lay-search lay-filter="client_name">
                                <option value="" id="new_client_name"></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>

js 代码

    // 为 layui 的 select 添加 新建不存在项目功能 ，当搜索项目 不存在时 新建该项
    $('body').on('keyup', '.layui-select-add-new .layui-select-title input', function(e){
        temp_value = e.currentTarget.value;
        temp_select_box = $(e.currentTarget).parents('.layui-form-select');
        true_select = temp_select_box.prev();
        
        true_select.find('option').eq(0).val(temp_value).html(temp_value);

        temp_sel = temp_select_box.find('.layui-anim-upbit dd').eq(0);
        temp_sel.removeClass('layui-select-tips');
        temp_sel.attr('lay-value',temp_value);
        temp_sel.html(temp_value);
    });