界面代碼，使用layui樣式，可以自行根據邏輯更改樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>訂單添加</title>
<link rel="stylesheet" href="static/3rd/layuiadmin/layui/css/layui.css">
</head>
<body>
<div id="shade" style="display: none;width: 100%;background-color: rgba(255, 255, 255, 0);height: 100%;z-index: 10;position: absolute;">
</div>
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">訂購人</label>
<div class="layui-input-inline">
<input type="text" id="ordClient" autocomplete="off" placeholder="請輸入訂購人" class="layui-input">
<div class="layui-unselect layui-form-select">
<dl class="layui-anim layui-anim-upbit" id="inputSelect" style="top: 0px;">
<dd mark="tips" name="dd" id="tips" onclick="ddClick(this)" class="layui-select-tips">請輸入訂購人</dd>
<dd mark="value" name="dd" onclick="ddClick(this)" class="">131241</dd>
<dd mark="value" name="dd" onclick="ddClick(this)" class="">21241</dd>
<dd mark="value" name="dd" onclick="ddClick(this)" class="">1413</dd>
<dd mark="value" name="dd" onclick="ddClick(this)" class="">41414</dd>
</dl>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="static/3rd/jquery/jquery.min.js"></script>
<script type="text/javascript" src="static/3rd/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="static/js/order-manage/order-list/order-add.js"></script>
</body>
</html>
order-add.js 代碼
function ddClick(dd) {
console.log(dd);
document.getElementById("inputSelect").style.display = "none";
document.getElementById("shade").style.display = "none";
var mark = dd.getAttribute("mark");
var dds = document.getElementsByName("dd");
for(var i=0;i<dds.length;i++) {
if(dd !== dds[i]) {
dds[i].className = "";
}
}
document.getElementById("tips").className = "layui-select-tips";
if("tips" === mark) {
document.getElementById("ordClient").value = "";
dd.className = "layui-select-tips layui-this";
}else if("value" === mark) {
document.getElementById("ordClient").value = dd.innerText;
dd.className = "layui-this";
}
}
layui.use(['form','layer'], function() {
var form = layui.form;
var layer = layui.layer;
document.getElementById("ordClient").oninput = function() {
var ordClient = document.getElementById("ordClient").value;
var dds = document.getElementsByName("dd");
for(var i=0;i<dds.length;i++) {
if(dds[i].innerHTML.indexOf(ordClient) < 0) {
dds[i].style.display = "none";
}else {
dds[i].style.display = "block";
}
}
};
document.getElementById("ordClient").onfocus = function () {
$("#inputSelect").fadeIn("slow");
document.getElementById("shade").style.display = "block";
};
document.getElementById("shade").onclick = function () {
document.getElementById("inputSelect").style.display = "none";
document.getElementById("shade").style.display = "none";
};
});