//自动完成显示DIV层
var autoComplete = {
divAutoComplete: null, //Div层JQuery对象
tableKeyword: null, //自动完成列表JQuery对象
txtKeyword: null, //文本框对象
//初始化自动完成
init: function() {
//自动完成显示层自引用
var self = autoComplete;
//初始化Div层对象
$('<div><div>').css({ 'background-color': 'White', 'position': 'absolute', 'z-index': '9999', 'display': 'none', 'text-align': 'left', 'border-style': 'solid', 'border-width': '1px' }).attr('id', 'divAutoComplete').appendTo('body');
self.divAutoComplete = $('#divAutoComplete');
//初始化自动完成列表
$('<table></table>').css({ 'width': '100%' }).attr('id', 'tableKeyword').appendTo('#divAutoComplete');
self.tableKeyword = $('#tableKeyword');
}, //显示Div
show: function(element) {
//自动完成显示层自引用
var self = autoComplete;
self.divAutoComplete.get(0).style.display = "";
self.divAutoComplete.get(0).style.pixelLeft = self.getLeft(element) + 2;
self.divAutoComplete.get(0).style.pixelTop = self.getTop(element) + element.offsetHeight;
self.divAutoComplete.get(0).style.width = element.offsetWidth - 4;
}, //隐藏Div
hidden: function() {
var self = autoComplete;
self.divAutoComplete.hide(800);
}, //获取触发自动完成事件元素距离左边框的距离
getLeft: function(element) {
var left = element.offsetLeft;
while (element = element.offsetParent) {
left += element.offsetLeft;
}
return left;
}, //获取触发自动完成事件元素距离上边框的距离
getTop: function(element) {
var top = element.offsetTop;
while (element = element.offsetParent) {
top += element.offsetTop;
}
return top;
}, //键盘按击弹起事件
bindkeyup: function(url, parameterName, elementID) {
var self = autoComplete;
self.txtKeyword = $('#' + elementID);
//触发事件源
var element = event.srcElement ? event.srcElement : event.target;
//关键字
var keyword = element.value.replace(/(^\s*)|(\s*$)/g, "");
//提交地址
url = url + '?' + parameterName + '=' + encodeURIComponent(keyword);
if (keyword == "") {
self.hidden();
}
if (self.tableKeyword.get(0).rows.length > 0) {
var Rows = self.tableKeyword.get(0).rows;
for (var i = 0; i < Rows.length; i++) {
if (Rows[i].childNodes[0].className == "TdOver") {
switch (event.keyCode) {
case 38: //上键
if (i - 1 >= 0) {
Rows[i - 1].childNodes[0].className = "TdOver";
Rows[i].childNodes[0].className = "TdOut";
return;
}
break;
case 40: //下键
if (i + 1 <= Rows.length - 1) {
Rows[i + 1].childNodes[0].className = "TdOver";
Rows[i].childNodes[0].className = "TdOut";
return;
}
break;
default:
break;
}
}
}
//Enter键
if (event.keyCode == 13) {
$("#tableKeyword > tbody tr").children(".TdOver").get(0).click();
return;
}
}
//异步提交数据
$.ajax({
url: url,
dataType: 'text',
success: function(data) {
self.bindKeywordData(data);
}
});
}, //绑定关键字列表
bindKeywordData: function(data) {
var self = autoComplete;
if (data.length > 0) {
var dataTable = eval(data);
if (dataTable.length > 0) {
self.show(self.txtKeyword.get(0));
self.tableKeyword.empty();
for (i = 0; i < dataTable.length; i++) {
self.tableKeyword.append('<tr align="left"><td onmouseover="autoComplete.changeClass(this);" onmouseout="this.className=\'TdOut\'" onclick="autoComplete.selectKeyword();">' + dataTable[i] + '</td></tr>');
}
self.tableKeyword.get(0).childNodes[0].childNodes[0].childNodes[0].className = 'TdOver';
}
else {
self.hidden();
}
}
}, //选择关键字
selectKeyword: function() {
var self = autoComplete;
var element = event.srcElement ? event.srcElement : event.target;
self.txtKeyword.val(element.innerHTML);
//焦点设置在字符串结束位置
var tbx = self.txtKeyword.get(0);
tbx.focus();
var rng = tbx.createTextRange();
rng.moveStart("character", tbx.value.length);
rng.collapse(true);
rng.select();
self.hidden();
}, //鼠标悬停触发事件
changeClass: function(obj) {
$("#tableKeyword > tbody tr").children(".TdOver").removeClass('TdOver').addClass('TdOut');
obj.className = 'TdOver';
}
} $(document).ready(function() {
autoComplete.init();
});后台代码this.txtRFIDStationCode.Attributes["onkeyup"] = "autoComplete.bindkeyup('../Ajax/RFIDStationKeywordSearch.ashx','Keyword','" + txtRFIDStationCode.ClientID + "');";
this.txtRFIDStationCode.Attributes["onblur"] = "autoComplete.hidden();";之前用JS对象写了一个自动完成的功能，想封装成Jquery插件，看了许多帮助文档都没什么思路
其实很简单你把你做的 打包成一个 JS文件就行
ID等等调用做成函数动态的
别人引用你的JS就行了那我给你看一个别人的jquery插件把
http://www.open-lib.com/Type/159-1.jsp
首先你的插件要设置自己的名字，然后可以通过对外参数来覆盖你的参数(function($){
$.fn.youname=function(options){
var defaults={
messages:"插件",
....
};
options = $.extend(defaults,options);
}
})(jQuery);