layui.form.select 实现可下拉可搜索可输入

本文介绍: layui.form.select 实现可下拉可搜索可输入

layui.form.select 实现可下拉可搜索可输入

`提示：这里的输入需要手动选择一下输入的内容`

文章 目录

layui.form.select 实现可下拉可搜索可输入
- ` 提示：这里的输入需要手动选择一下输入的内容` ![在这里插入图片描述](https://img-blog.csdnimg.cn/1f7f021c9ee343839449a0f4fd8d37fb.png)
前言
一、实现方法
二、使用步骤
三、调用方法
四、完整代码
五、重点

前言

该方法只针对 layui v2.7.6 左右的版本

一、实现方法

捕获搜索框输入的内容如果不存在则实时显示不存在的选项并添加进去

二、使用 步骤

1.引入库 layui 的js 和css

2.创建方法

function 下拉可输入(root='is_body') {
        // 依赖
        const form = layui.form
        const $ = layui.$

        // 监听输入内容
        $('#'+root+'').on('input', '.可输入可下拉可搜索 + .layui-form-select .layui-select-title input', function (event) {
            let 输入框对象 = $(this)
            let 输入内容 = 输入框对象.val();
            let 根节点 = 输入框对象.parent().parent().parent()

            let 假下拉容器 = 根节点.find('dl')

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

        // 监听自定义选项被选中
        $('#'+root+'').on('click', '.is_select_text', function () {
            let 输入内容 = $(this).attr('lay-value')
            let 根节点 = $(this).parent().parent().parent()
            let 真下拉容器 = 根节点.find('select')

            真下拉容器.append(`<option value="${输入内容}">${输入内容}</option>`)
            真下拉容器.val(输入内容);
            form.render('select')
        });


    }

3.定义不变层的id 和需要 应用 layui.form.sel e ct 实现可下拉可搜索可输入的sel e ct 的class

代码如下（示例）：

    <div class="layui-body left_0">
        <div class="layui-row is_my_body padding_5" id="is_body">
            <!-- 内容主体区域 -->
            <form class="layui-panel layui-row layui-form">
                
                    <div class="layui-col-md3">
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label">测试:</label>
                            <div class="layui-input-block">
                                <select name="主类型" lay-search class="可输入可下拉可搜索">
                                    <option value="">请选择</option>
                                    <option value="1">选项1</option>
                                    <option value="2">选项2</option>
                                    <option value="3">选项3</option>
                                    <option value="4">选项4</option>
                                </select>
                            </div>
                        </div>
                    </div>
                
            </form>
            <!-- 内容主体区域 -->
        </div>
    </div>

<div class="layui-row is_my_body padding_5" id="is_body">

上述代码的要求是元素自身不会发生变动而且必须是id 如果需要使用其他方式请修改方法的代码

<select name="主类型" lay-search class="可输入可下拉可搜索">

类必须定义到经过layui-form 渲染过的无论什么方式都行类命指定位’可输入可下拉可搜索‘ 如果需要使用其他方式请修改方法的代码

三、调用方法

    let 不变元素id = 'is_body'
    下拉可输入(不变元素id)

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/import/layui/layui.js" charSet="utf-8"></script>
    <link type="text/css" href="../static/import/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-body left_0">
    <div class="layui-row is_my_body padding_5" id="is_body">
        <!-- 内容主体区域 -->
        <form class="layui-panel layui-row layui-form">

            <div class="layui-col-md3">
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">测试:</label>
                    <div class="layui-input-block">
                        <select name="主类型" lay-search class="可输入可下拉可搜索">
                            <option value="">请选择</option>
                            <option value="1">选项1</option>
                            <option value="2">选项2</option>
                            <option value="3">选项3</option>
                            <option value="4">选项4</option>
                        </select>
                    </div>
                </div>
            </div>

        </form>
        <!-- 内容主体区域 -->
    </div>
</div>
<script>
    function 下拉可输入(root = 'is_body') {
        // 依赖
        const form = layui.form
        const $ = layui.$

        // 监听输入内容
        $('#' + root + '').on('input', '.可输入可下拉可搜索 + .layui-form-select .layui-select-title input', function (event) {
            let 输入框对象 = $(this)
            let 输入内容 = 输入框对象.val();
            let 根节点 = 输入框对象.parent().parent().parent()

            let 假下拉容器 = 根节点.find('dl')

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

        // 监听自定义选项被选中
        $('#' + root + '').on('click', '.is_select_text', function () {
            let 输入内容 = $(this).attr('lay-value')
            let 根节点 = $(this).parent().parent().parent()
            let 真下拉容器 = 根节点.find('select')

            真下拉容器.append(`<option value="${输入内容}">${输入内容}</option>`)
            真下拉容器.val(输入内容);
            form.render('select')
        });


    }
</script>
<script>
    
    let 不变元素id = 'is_body'
    下拉可输入(不变元素id)

</script>
</body>
</html>

五、重点

创建方法(可根据自身需求修改只提供一个思路)
不变元素 id 就是自身不会发生变动的元素的id并且这个元素一定要在指定的select外面 (layui的弹窗一般放在body的第一层你可能会出现在正文内容定义了is_body的id 但是弹窗的代码在body的第一层导致弹窗中的select 所以要留心一下)
class=“可输入可下拉可搜索” 或者class包含“可输入可下拉可搜索” 的 select 一定是经过layui渲染的无论是顶部的layui-form还是layui-form-select都可以