layui.js下载地址：https://www.layui.com/
<!DOCTYPE html> <html> <head> <title>selectInput</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <script src="/WebResources/ClientGlobalContext.js.aspx"></script> <script src="/WebResources/new_Jquery.js"></script> <link rel="stylesheet" type="text/css" href="/WebResources/new_layui.css" /> <style> * { padding: 0px; margin: 0px; } .scroll-body { overflow-x: hidden; overflow-y: auto; } .xm-option { display: flex; align-items: center; position: relative; padding: 0 10px; line-height: 36px; cursor: pointer; } .xm-option-content { display: flex; position: relative; padding-left: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666; width: calc(100% - 20px); } </style> </head> <body> <div class="layui-form layui-container"> <div class="layui-form-item"> <div class="layui-input-block" id="test1" style="margin: 0px;"></div> </div> </div> </body> <script src="new_layui.js"></script> <script> //将改变信息进行数据变化 layui.config({ base: 'https://xfdev.xgxf.com/select-input/src/modules/' }).extend({ selectInput: 'selectInput/selectInput' }).use(['form', 'selectInput'], function () { var $ = layui.$, form = layui.form, selectInput = layui.selectInput; var ins = selectInput.render({ // 容器id，必传参数 elem: '#test1', name: 'test', // 渲染的input的name值 hasSelectIcon: true, layFilter: 'test', //同layui form参数lay-filter layVerify: 'required', //同layui form参数lay-verify layVerType: '', // 同layui form参数lay-verType layReqText: '请填写文本', //同layui form参数lay-ReqText initValue: parent.Xrm.Page.getAttribute("new_accountid").getValue()[0].name, // 渲染初始化默认值 placeholder: '请输入名称', // 渲染的inputplaceholder值 data: [{ value: '请选择', name: '请选择' }], }); //输入input,监听事件（） ins.on('itemSelect(test1)', function (obj) { var selectValue = ins.getValue(); if (obj.data) { console.log(obj.innerText);//文本信息 console.log(obj.data);//value值 } }); // 监听input 实时输入事件（只能获取文本值，其value值无法获取） ins.on('itemInput(test1)', function (obj) { var arr = []; if (!obj.data) { return false; } var list = []; var obj_data = {}; obj_data["search"] = obj.data; //这里的$.ajax去请求后台拿回数据 $.ajax({ url: "/api/data/v9.0/new_GetUserInfo", type: "post", dataType: "json", async: false, data: JSON.stringify(obj_data), contentType: "application/json; charset=utf-8", success: function (data) { var entitys = JSON.parse(data.Message).Entities; arr = entitys; }, error: function (data) { console.log('Error!'); } }) //数据整理 for (var i in arr) { var obj1 = {}; obj1["value"] = arr[i].Attributes[1].Value;//文本VALUE值 obj1["name"] = arr[i].Attributes[0].Value;//文本信息 list.push(obj1); } //添加下拉框数据 ins.addSelect(list, false); }); }); </script> </html>
对应的工具下载：https://gitee.com/JerryZst/select-input