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