代码拉取完成，页面将自动刷新
selectInput 是将input框变成即可输入亦可选择的select下拉组件，主要使用场景是用户可以输入关键词，匹配系统存在的联想词形成select下拉框以供用户选择，当然用户也可以使用自行输入的信息，支持模糊匹配，数据源可以本地赋值，也可以异步url请求加载，或者干脆点直接实时输入远程请求联想呈现
libs/moduleslayui.config 和 layui.base 配置是否正确, 可参考 示例文件layui.use 来引入扩展! 可参考 示例文件仅供参考, 请勿复制粘贴照搬照抄，否则导致的报错或者无法运行自行负责
layui
.config({
base: "./modules/",
})
.extend({
selectInput: "selectInput/selectInput",
});
<div class="layui-form-item">
<div class="layui-input-block" id="test1"></div>
</div>
layui.use(["selectInput"], function () {
var selectInput = layui.selectInput;
// 全量参数版本
var ins = selectInput.render({
// 容器id，必传参数
elem: '#test1',
name: 'test', // 渲染的input的name值
layFilter: 'test', //同layui form参数lay-filter
layVerify: 'required', //同layui form参数lay-verify
layVerType: 'tips', // 同layui form参数lay-verType
layReqText: '请填写文本', //同layui form参数lay-ReqText
initValue: 'iPhone12 Pro Max', // 渲染初始化默认值
hasSelectIcon: false,
placeholder: '请输入名称', // 渲染的inputplaceholder值
// 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
data: [
{value: 1111, name: 1111},
{value: 2333, name: 2222},
{value: 2333, name: 2333},
{value: 2333, name: 2333},
],
url: "https://www.layui.com/", // 异步加载的url，异步加载联想词的数组值，设置url，data参数赋的值将会无效，url和data参数两者不要同时设置
remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
parseData: function (data) { // 此参数仅在异步加载data数据下或者远程搜索模式下有效，解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据
},
error: function (error) { // 异步加载出错的回调 回调参数是错误msg
},
done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据
},
remoteMethod: function (value, cb) { // 远程搜索的回调函数
// value 是input实施输入的value值
// cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数
//案例
//这里如果val为空, 则不触发搜索
if (!value) {
return cb([]);
}
//这里的$.ajax去请求后台拿回数据
$.ajax({
method: 'get',
url: 'https://your.domain/search',
data: {
keyword: val,
},
success: function (data) {
// 此处最好直接返回取你返回的 data属性，如：data.data，这样不限制你后端返回的数据对象格式，如果整体传参，必须满足：{"code":0,"msg":"success","data":[]}
return cb(data)
}
})
}
}
});
// 如果使用本地数据加载，不要使用设置远程 url参数 完整的本地赋值数据案例
var ins = selectInput.render({
elem: '#test1',
data: [
{value: 1111, name: 1111},
{value: 2333, name: 2222},
{value: 2333, name: 2333},
{value: 2333, name: 2333},
],
placeholder: '请输入名称',
name: 'list_common',
remoteSearch: false
});
// 监听input 实时输入事件
ins.on('itemInput(test1)', function (obj) {
console.log(obj);
});
// 监听select 选择事件
ins.on('itemSelect(test1)', function (obj) {
console.log(obj);
});
// 动态添加select选项，第二个默认为false，即为覆盖data重载，true为push追加
ins.addSelect([
{value: 1111, name: 1111},
{value: 2333, name: 2222},
{value: 2333, name: 2333},
{value: 2333, name: 2333},
{value: 6666, name: 9999},
{value: 8888, name: 101010},
],false);
// 获取选中的value值
var selectValue = ins.getValue();
// 清空输入框的value值
ins.emptyValue();
});
你可以点击 在线文档 开始阅读文档, 如果你已经拉取了完整的项目, 可以在本地直接打开 README.md 来阅读离线文档！具体参数使用请移步到 使用参数文档
PS：有问题的话可以在评论区回复，会尽量完善这个组件的
加url的那种异步加载适用的场景是：你的data数据需要在页面渲染的时候异步加载请求后台拿到数据，然后后续搜索是基于这个数据进行前端搜索的,所以url异步加载和data赋值模式两者互斥，而远程实时搜索这种和url异步加载/data赋值模式两者是互斥的，本质上url异步加载和data直接赋值都是前端基于已有的数据进行搜索，而远程实时搜索，前端不参与搜索匹配，而会调用你完成的remoteMethod远程搜索函数去后台搜索完后返回一个data列表渲染；parseData解析回调仅在url异步加载和远程实时搜索的时候有效，如果设置了，必须返回数据，否则页面无法进行搜索显示功能**
最简单的粗暴的方式就是直接使用你们的钞能力, 当然这是您自愿的! 点击可直接查看大图
当然, 如果客观条件不允许或者主观上不愿意, 也没啥关系嘛! 码农的钱挣得都是辛苦钱啊. 所以除了使用 钞能力, 你还可以通过以下方式支持作者!
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型
马建仓 AI 助手