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