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); });
效果:点击任意一行,就加载进另一个文本框