文本框联动查询

2021-09-12 15:04:20 阅读：150 来源： 互联网

标签：obj form layui 文本框查询联动 var selectInput data

layui.js下载地址：https://www.layui.com/

<!DOCTYPE html>
<html>
<head>
    <title>selectInput</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <script src="/WebResources/ClientGlobalContext.js.aspx"></script>
    <script src="/WebResources/new_Jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="/WebResources/new_layui.css" />
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .scroll-body {
            overflow-x: hidden;
            overflow-y: auto;
        }

        .xm-option {
            display: flex;
            align-items: center;
            position: relative;
            padding: 0 10px;
            line-height: 36px;
            cursor: pointer;
        }

        .xm-option-content {
            display: flex;
            position: relative;
            padding-left: 15px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #666;
            width: calc(100% - 20px);
        }
    </style>
</head>
<body>
    <div class="layui-form layui-container">
        <div class="layui-form-item">
            <div class="layui-input-block" id="test1" style="margin: 0px;"></div>
        </div>
    </div>
</body>
<script src="new_layui.js"></script>
<script>
    //将改变信息进行数据变化
    layui.config({
        base: 'https://xfdev.xgxf.com/select-input/src/modules/'
    }).extend({
        selectInput: 'selectInput/selectInput'
    }).use(['form', 'selectInput'], function () {
        var $ = layui.$,
            form = layui.form,
            selectInput = layui.selectInput;
        var ins = selectInput.render({
            // 容器id，必传参数
            elem: '#test1',
            name: 'test', // 渲染的input的name值
            hasSelectIcon: true,
            layFilter: 'test', //同layui form参数lay-filter
            layVerify: 'required', //同layui form参数lay-verify
            layVerType: '', // 同layui form参数lay-verType
            layReqText: '请填写文本', //同layui form参数lay-ReqText
            initValue: parent.Xrm.Page.getAttribute("new_accountid").getValue()[0].name, // 渲染初始化默认值
            placeholder: '请输入名称', // 渲染的inputplaceholder值
            data: [{ value: '请选择', name: '请选择' }],
        });
        //输入input,监听事件（）
        ins.on('itemSelect(test1)', function (obj) {
            var selectValue = ins.getValue();
            if (obj.data) {
              console.log(obj.innerText);//文本信息
              console.log(obj.data);//value值
            }
        });
        // 监听input 实时输入事件（只能获取文本值，其value值无法获取）
        ins.on('itemInput(test1)', function (obj) {
            var arr = [];
            if (!obj.data) {
                return false;
            }
            var list = [];
            var obj_data = {};
            obj_data["search"] = obj.data;
            //这里的$.ajax去请求后台拿回数据
            $.ajax({
                url: "/api/data/v9.0/new_GetUserInfo",
                type: "post",
                dataType: "json",
                async: false,
                data: JSON.stringify(obj_data),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var entitys = JSON.parse(data.Message).Entities;
                    arr = entitys;
                }, error: function (data) {
                    console.log('Error!');
                }
            })
            //数据整理
            for (var i in arr) {
                var obj1 = {};
                obj1["value"] = arr[i].Attributes[1].Value;//文本VALUE值
                obj1["name"] = arr[i].Attributes[0].Value;//文本信息
                list.push(obj1);
            }
          //添加下拉框数据
          ins.addSelect(list, false);
        });
    });
</script>
</html>

对应的工具下载：https://gitee.com/JerryZst/select-input

标签：obj,form,layui,文本框,查询,联动,var,selectInput,data
来源： https://www.cnblogs.com/LanHai12/p/15258154.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

文本框联动查询