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);
    });

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

原文地址:https://www.cnblogs.com/sunliyuan/p/12463964.html