zoukankan      html  css  js  c++  java
  • JavaScript文本框联动

    jquery扩张方法:

    $.fn.EASearchBox = function (url, id, text, json, fun) {
        var _self = $(this);
        var obj = arguments[3];
        var pas = { pa: _self.val() };
        if (typeof obj == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length) {
            for (var o in obj) {
                pas[o] = obj[o];
            }
        }
        var searchBox = $(".searchBox");
        _self.on("click", function () {
            _self.select();
        });
        _self.on("keyup", function () {
            pas["pa"] = _self.val();
            $.post(url, pas, function (res) {
                if (res != "") {
                    var data = JSON.parse(res);
                    if (searchBox.length == 0) {
                        searchBox = document.createElement("ul");
                        searchBox.className = "searchBox";
                        searchBox.style.minWidth = _self.outerWidth() + "px";
                        searchBox.style.left = _self.position().left + "px";
                        searchBox.style.top = (_self.position().top + _self.outerHeight()) + "px";
                        _self.parent().append(searchBox);
                        searchBox = $(searchBox);
                    }
                    else {
                        searchBox[0].style.left = _self.position().left + "px";
                        searchBox[0].style.top = (_self.position().top + _self.outerHeight()) + "px";
                        searchBox.show();
                    }
                    searchBox.empty();
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        var li = document.createElement("li");
                        li.className = "d-flex justify-content-around";
                        li.innerHTML = "<div>" + item[text] + '</div><div class="f-1 text-right ml-2">' + item[id].replace(eval('/' + _self.val() + '/i'), '<span class="keyword">$&</span>') + "</div>";
                        li.dataset.id = item[id];
    
                        $(li).on("click", function () {
                            searchBox.hide();
                            var selId = $(this).data("id");
                            var resItem = data.filter(function (p) {
                                if (p[id] == selId) {
                                    return p;
                                }
                            });
                            if (resItem.length > 0) {
                                if (typeof json === "function") {
                                    json(selId, resItem[0]);
                                }
                                else {
                                    fun(selId, resItem[0]);
                                }
                            }
                        });
                        searchBox.append(li);
                    }
                }
                else {
                    if (searchBox.length > 0) {
                        searchBox.hide();
                    }
                }
            });
        });
        $(document).on('click', function () {
            if (searchBox.length > 0) {
                searchBox.hide();
            }
        });
    };
    

      调用:

    $("#TxtWeqpr").EASearchBox("/Material/GetdatailList", "Weqpr", "WeqpGsgtm", function (id, res) {
            $('#TxtWeqpr').val(res.Weqpr);
            $('#TxtWeqpGsgtm').val(res.WeqpGsgtm);
        });
    

      效果:点击任意一行,就加载进另一个文本框

  • 相关阅读:
    redis基本数据结构-集合set
    redis基本数据结构-列表
    redis基本数据结构-散列
    redis基本数据结构-字符串
    redis基础
    关于HTTP调用WCF传递DataTable参数的处理
    解决WCF跨域问题,及DataTable参数问题
    让WCF支持Http调用
    分页方法,始终只生成指定数量的页码
    CVE-2021-1675漏洞复现
  • 原文地址:https://www.cnblogs.com/sunliyuan/p/12463964.html
Copyright © 2011-2022 走看看