Layui实现搜索实时下拉选择框
layui+JQuery实现搜索下拉按下enter发送异步请求下拉框的数据，将返回的数据挂载在下拉选项中提供选择html结构layui下载地址
·
最近改造老项目的时候遇到这样一个需求：
能够动态发送请求加载下拉框，由于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，但是都以失败告终了，不知道大神们有没有什么好的解决办法
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)