JQuery封装的AutoComplete插件

(function ($) {
//sql:sql语句
//DropDownColumns:在下拉层中显示的字段（以gridview方式显示）,对象数组，包括字段名和宽度
$.fn.KingAutoSelect = function (options, DropDownColumns, DataUrl) {
var settings =
{
isShowTitle: true,
DropDownHeight: "220px",
DropDownWidth: "160px",
onSelect: function () { return false; }
}//定义默认值
var opts = $.extend({}, settings, options);
opts.Ctr = $(this);
addDropDownListener(opts.Ctr, opts, DropDownColumns, DataUrl);
}
function createDropDownDiv(obj, opts, DropDownColumns, DropDownData) {
obj.data("ItemValue", "");
obj.data("currentRow", "1");
try {
$("#" + obj.attr("id") + "_KingDropDown").remove();
}
catch (e) {
}
var KingDropDownDiv = document.createElement("div");
KingDropDownDiv.id = obj.attr("id") + "_KingDropDown";
KingDropDownDiv.className = "KingDropDownDiv";
$(KingDropDownDiv).css("width", opts.DropDownWidth);
$(KingDropDownDiv).css("Height", opts.DropDownHeight);
$(KingDropDownDiv).css("overflow-x", "hidden");
$(KingDropDownDiv).css("overflow-y", "auto");
$(KingDropDownDiv).css("position", "absolute");
var plaTop = opts.Ctr.offset().top + opts.Ctr.outerHeight() + "px";
var plaLeft = opts.Ctr.offset().left + "px";
$(KingDropDownDiv).css("top", plaTop);
$(KingDropDownDiv).css("left", plaLeft);
var DropDownTableStr = "<table style='border-collapse:collapse;width:100%'>";
if (opts.isShowTitle) {
DropDownTableStr += "<tr class='KingDropDownTitle'>";
}
else {
DropDownTableStr += "<tr class='KingDropDownTitle' style='display:none'>";
}
$(DropDownColumns).each(function (DropDownColumnsFlag) {
DropDownTableStr += "<td style='height:25px;display:" + DropDownColumns[DropDownColumnsFlag].Display + ";Font-weight:bold;width:" + DropDownColumns[DropDownColumnsFlag].ColumnWidth + "'>";
DropDownTableStr += DropDownColumns[DropDownColumnsFlag].ColumnName;
DropDownTableStr += "</td>";
});
DropDownTableStr += "</tr>";
$(DropDownData).each(function (DropDownDataFlag) {
if (DropDownDataFlag % 2 != 0) {
DropDownTableStr += "<tr class='KingDropDownItemOdd'>";
}
else {
DropDownTableStr += "<tr class='KingDropDownItemEven'>";
}
$(DropDownColumns).each(function (DropDownColumnsFlag) {
DropDownTableStr += "<td style='height:23px;display:" + DropDownColumns[DropDownColumnsFlag].Display + "'>";
DropDownTableStr += DropDownData[DropDownDataFlag][DropDownColumns[DropDownColumnsFlag].ColumnName];
DropDownTableStr += "</td>";
});
DropDownTableStr += "</tr>";
});
DropDownTableStr += "</table>";
$(DropDownTableStr).appendTo($(KingDropDownDiv));
$(KingDropDownDiv).appendTo(obj.parent());//创建一个下拉的层
}
function createKingLoadingLetter(obj, opts) {
var KingDropDownDiv = document.createElement("div");
KingDropDownDiv.id = obj.attr("id") + "_KingLoadingLetter";
KingDropDownDiv.className = "KingLoadingLetter";
KingDropDownDiv.innerHTML = "<img src='/img/loading.gif'/>";
$(KingDropDownDiv).css("width", 100);
$(KingDropDownDiv).css("Height", 20);
$(KingDropDownDiv).css("overflow-x", "hidden");
$(KingDropDownDiv).css("overflow-y", "auto");
$(KingDropDownDiv).css("position", "absolute");
var plaTop = opts.Ctr.offset().top + (opts.Ctr.outerHeight() / 2 - 2) + "px";
var plaLeft = opts.Ctr.offset().left + opts.Ctr.outerWidth() - 50 + "px";
$(KingDropDownDiv).css("top", plaTop);
$(KingDropDownDiv).css("left", plaLeft);
$(KingDropDownDiv).appendTo(obj.parent());//创建一个下拉的层
}
function addDropDownListener(obj, opts, DropDownColumns, DataUrl) {
obj.bind("propertychange", function () {
createKingLoadingLetter(obj, opts);
var paras = new Object();
paras.key = obj.val();
$.post(DataUrl, paras, function (data) {
var DropDownData = $.parseJSON(data);
createDropDownDiv(opts.Ctr, opts, DropDownColumns, DropDownData);
var cr = obj.data("currentRow") - 0;
var Item = $($("#" + obj.attr("id") + "_KingDropDown table tr")[cr]);
Item.addClass("KingDropDownItemMouseOver");
addDropDownItemListener(obj, opts, DropDownColumns, DataUrl);
$("#" + obj.attr("id") + "_KingLoadingLetter").remove();
});
});
obj.bind("keydown", function (e) {
var key = e.which;//回车
if (key == 13) {
e.preventDefault();
var cr = obj.data("currentRow") - 0;
var Item = $($("#" + obj.attr("id") + "_KingDropDown table tr")[cr]);
DropDownKeyItemSelect(obj, opts, DropDownColumns, DataUrl, Item);
}
else if (key == 38) {//上
var cr = obj.data("currentRow") - 0;
if (cr > 1) {
var Item = $($("#" + obj.attr("id") + "_KingDropDown table tr")[cr]);
Item.removeClass("KingDropDownItemMouseOver");
Item.prev().addClass("KingDropDownItemMouseOver");
obj.data("currentRow", cr - 1);
setScrollWithKeyBoard(opts, obj);
}
}
else if (key == 40) {//下
var cr = obj.data("currentRow") - 0;
if (cr < $("#" + obj.attr("id") + "_KingDropDown table tr").length - 1) {
var Item = $($("#" + obj.attr("id") + "_KingDropDown table tr")[cr]);
Item.removeClass("KingDropDownItemMouseOver");
Item.next().addClass("KingDropDownItemMouseOver");
obj.data("currentRow", cr + 1);
setScrollWithKeyBoard(opts, obj);
}
}
});
$(document).click(function () {
$("#" + obj.attr("id") + "_KingDropDown").remove();
});
}
function setScrollWithKeyBoard(opts, obj) {
var KingDropDownDivHeight = opts.DropDownHeight.replace("px", "") - 0;
var scrMonve = (obj.data("currentRow") * 25 + 50) - KingDropDownDivHeight;
if (KingDropDownDivHeight > 0) {
$("#" + obj.attr("id") + "_KingDropDown")[0].scrollTop = scrMonve;
}
}
function addDropDownItemListener(obj, opts, DropDownColumns, DataUrl) {
$("#" + obj.attr("id") + "_KingDropDown table tr:not(:first)").bind("mouseover", function () {
$(this).addClass("KingDropDownItemMouseOver");
});
$("#" + obj.attr("id") + "_KingDropDown table tr:not(:first)").bind("mouseout", function () {
$(this).removeClass("KingDropDownItemMouseOver");
});
$("#" + obj.attr("id") + "_KingDropDown table tr:not(:first)").bind("click", function () {
DropDownKeyItemSelect(obj, opts, DropDownColumns, DataUrl, $(this));
});
}
function DropDownKeyItemSelect(obj, opts, DropDownColumns, DataUrl, Item) {
if (Item.length == 0) {
alert("无可选数据");
return false;
}
obj.unbind("propertychange");
obj.unbind("keydown");
var textOrderNum = 0;
var valueOrderNum = 0;
$(DropDownColumns).each(function (DropDownColumnsFlag) {
if (DropDownColumns[DropDownColumnsFlag].ColumnName == opts.TextColumn) {
textOrderNum = DropDownColumnsFlag;
}
if (DropDownColumns[DropDownColumnsFlag].ColumnName == opts.ValueColumn) {
valueOrderNum = DropDownColumnsFlag;
}
});
obj.val(Item.children()[textOrderNum].innerText);
obj.attr("ItemValue", Item.children()[valueOrderNum].innerText);
$("#" + obj.attr("id") + "_KingDropDown").remove();
addDropDownListener(obj, opts, DropDownColumns, DataUrl);
opts.onSelect(Item);
}