Layui搜索下拉框(xm-select)

hengyua

5582人浏览 · 2023-10-19 16:56:25

hengyua · 2023-10-19 16:56:25 发布

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>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Kubernetes CoreDNS 解析超时排查（ndots 与 NodeLocal DNSCache）

CoreDNS 超时先用 ClusterIP 直连排除数据面，再读 Pod的ndots 与 search。默认 ndots:5 让短名查询放大数倍，AAAA 再乘一倍。指标上区分 NXDOMAIN 瀑布和真正的 SERVFAIL/p99。NodeLocal DNSCache 降 RTT、不消灭放大；根上仍是 FQDN 或谨慎的 dnsConfig。改 DNS 全局配置必须可回滚，禁止先停 Core