layui官网https://www.layui.com/demo/
最近做的一个项目要用的一个动态下拉框搜索,最开始用的是formSelects 但是这个数据量大的话,渲染的速度慢代码冗余,不够流畅,xm-select是formselects的升级版,利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展,下面是我使用的一个下拉单选搜索.
上图片:
这个是控件点击展开的样子
在搜索框中可以输入要查找的内容只要是控件展开上的内容,也可以设置只输入前边的或者输入后边的因为我的这个是两个字段拼接显示的因为业务需求需要汉子和字母都要搜索,可以根据自己的需求来设置,只需要在sql语句中控制一下就可以
因为这个是基于layui的界面所以你需要先去layui的官网下载一下layui的js和css,然后去xm-select 里面下载js和css(链接在上面)
下面放代码HTML页面:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="~/layuiadmin/style/admin.css" media="all">
<script src="~/Scripts/xm-select/dist/xm-select.js"></script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/layuiadmin/layui/layui.js"></script>
</head>
<body>
<div class="layui-form-item">
<label class="layui-form-label">刻制人</label>
<div class="xm-select-demo" name="SCarver" id="demo5">
</div>
</div>
<script>
var demo4 = xmSelect.render({
el: '#demo5', //绑定页面上的id
filterable: true,
clickClose: true,
name: 'SCarver', //页面上的name
style: { width: '212px' },
remoteSearch: true,
radio: true, //单选
showCount: 50, //下拉展开显示的条数
searchTips: "输入名字或账号",
remoteMethod: function (val, cb, show) {
//需要回传一个数组
$.ajax({
type: 'post',
url: '/Seal/SelectUserAll', //数据接口
data: { keyword: val }, //搜素框里的值
dataType: 'json',
success: function (data) {
var res = data;
console.log(data);
cb(res.data)
},
error: function myfunction() {
cb([]);
}
});
},
data: []
});
</script>
</body>
</html>
1307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
