最近改造老项目的时候遇到这样一个需求:
能够动态发送请求加载下拉框,由于layui没有这样的组件,所以只能靠自己改造了。
这个搜索输入框的结构是这样的,前面是一个输入框,输入框后面是一个下拉选择框,通过定位把他们重叠在一起,用js控制输入点击enter之后发送请求来实现动态加载下拉框的选项
按下enter发送异步请求下拉框的数据,将返回的数据挂载在下拉选项中提供选择。
选中之后同步修改输入框中的数据
html结构
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.form-box{
width: 600px;
margin: 100px auto 0;
}
</style>
</head>
<body>
<div class="form-box">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">搜索下拉</label>
<div class="layui-input-block">
<input type="text" name="groupName" id="groupName" class="layui-input"
placeholder="搜索" style="position:absolute;z-index:2;width:88%;" value="" autocomplete="off">
<select id="orgname" placeholder="请输入名称搜索" name="orgname" lay-verify="required" lay-filter="orgname" >
<option value="">请输入名称搜索</option>
</select>
</div>
</div>
</form>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
// 模拟请求返回数据
function getData(){
return new Promise(resolve=>{
let arr=[]
for(let i=0;i<10;i++){
let obj={}
obj.value=String(i);
obj.text="成都市第"+i+"人民医院"
arr.push(obj)
}
resolve(arr)
})
}
// 用于缓存下拉获取的数据
let dropData
// 渲染下拉框的数据
function innitSelect(name,data){
let html=''
if(data&&data instanceof Array){
data.forEach(item=>{
html+="<option value="+item.value+">"+item.text+"</option>"
})
};
$(name).html(html)
}
$("#groupName").on("keyup",async function(e){
// 点击enter实现搜索功能
if(e.which=='13'){
console.log("点击了enter",$(this).val())
// 模拟请求获取下拉菜单所需的参数
dropData=await getData()
console.log("下拉菜单的数据:",dropData)
// 将获取回来的数据渲染给下拉菜单
innitSelect("#orgname",dropData)
let form = layui.form;
form.render()
// 将下拉框展开
$(".layui-form-select").addClass("layui-form-selected")
}
})
layui.use(['form'], function(){
form = layui.form;
// 监听下拉框改变事件,修改输入框中的内容
form.on("select(orgname)",function(data){
let value=data.value
let selectObj=dropData.filter(item=>{
return item.value==value
})
$("#groupName").val(selectObj[0].text);
})
});
</script>
</body>
</html>
以上只是个人做的一个小案例供大家参考,有很多不足的地方请大家指出。
另外最近又遇到一个问题,在使用layui表格的时候遇到的。
需求是这样的,鼠标hover在表格某一列能够提示在cell的上方能够显示查看详情还是做其它操作,不只是文字提示,希望还能点击。
我试过自己使用定位和使用tip,但是都以失败告终了,不知道大神们有没有什么好的解决办法