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

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

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

文章目录

layui.form.select 实现可下拉 可搜索 可输入` 提示：这里的输入需要手动选择一下输入的内容` 

前言一、实现方法二、使用步骤1.引入库 layui 的js 和css2.创建方法3.定义不变层的id 和 需要应用 layui.form.select 实现可下拉 可搜索 可输入 的select 的class

三、调用方法四、完整代码五、重点

前言

该方法只针对 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 > 0) {

if (假下拉容器.find('.is_select_text').length > 0) {

假下拉容器.find('.is_select_text').text(输入内容)

假下拉容器.find('.is_select_text').attr('lay-value', 输入内容)

} else {

假下拉容器.prepend(`

}

}

});

// 监听自定义选项被选中

$('#'+root+'').on('click', '.is_select_text', function () {

let 输入内容 = $(this).attr('lay-value')

let 根节点 = $(this).parent().parent().parent()

let 真下拉容器 = 根节点.find('select')

真下拉容器.append(`${输入内容}`)

真下拉容器.val(输入内容);

form.render('select')

});

}

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

代码如下（示例）：