文本框联动查询

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

 

原文地址:https://www.cnblogs.com/LanHai12/p/15258154.html