JQuery实现的输入框自动补全

/**
 *作者：阿斌 
 * 
 * 用法:<input type="input" value="button1" id="test"/>
 *   $("#test").likeQuery("your web path which response a json str","your name filed");
 **/


$(function() {
jQuery.fn.extend({
/**
* @param {Object} webPath 请求的路径
* @param {Object} name:下拉框显示的值的字段(该字段为从服务器端获取的json数据中的名称显示)
*/
"likeQuery": function(webPath, name) {
var highlightindex = -1; //定义高亮显示索引


var loadDataFlag = 0; //数据是否已经加载  0:未加载   1:已经加载


var wordInput = $(this); //当前输入框


var wordInputOffset = wordInput.offset(); //当前输入框的边距信息


var nameFiled = name;


//allData的数据便为nodeObj规定的格式
var allData = null;
$.ajax({
type: "post",
url: webPath,
async: false,
success: function(data) {
allData = JSON.parse(data);
}
});


//隐藏自动补全框,并定义css属性
var $autoNode = $("<div/>").hide()
.css("position", "absolute")
.css("border", "1px solid #CCC")
.css("z-index", "9001")
.css("top", wordInputOffset.top + wordInput.height() + 3 + "px")
.css("left", wordInputOffset.left + "px")
.css("background-color", "#aaaaaa")
.css("padding-left", "1px")
.css("padding-right", "1px")
.css("color", "black")
.css("overflow-x", "hidden")
.width(wordInput.width())
.appendTo($("body"));
//$autoNode的儿子节点(从远程加载的数据div)
var $autoNodeChildren = $autoNode.children("div");


wordInput.click(function() {
//数据还没有加载
if(loadDataFlag == 0) {
loadAutoNode($(wordInput));
loadDataFlag = 1;
}
//显示下拉框
$autoNode.fadeIn();
//阻止事件冒泡
return false;
});


wordInput.keydown(function(event) {
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;


if(keyCode == 38) {
//输入向上,选中文字高亮     
if($autoNodeChildren.length <= 0) {
return;
}
//如果已经选中
if(highlightindex != -1) {
//如果选中的是第一个元素,则按向上后选中最后一个元素
if(highlightindex == 0) {
highlightindex = $autoNodeChildren.length - 1;


} else {
highlightindex--;
}
} else {
//如果没有选中则选最后一个
highlightindex = $autoNodeChildren.length - 1
}
setSelectNodeColor(highlightindex);
//选中位置
$autoNode.animate({ scrollTop: (highlightindex - 1) * 25 }, 10);
} else if(keyCode == 40) {
//输入向下,选中文字高亮     
if($autoNodeChildren.length <= 0) {
return;
}
//如果已经选中
if(highlightindex != -1) {
//如果选中的是最后一个元素,则选中第一个元素
if(highlightindex == $autoNodeChildren.length - 1) {
highlightindex = 0;


} else {
highlightindex++;
}
} else {
//如果没有选中则选第一个
highlightindex = 0;
}
setSelectNodeColor(highlightindex);
//选中位置
$autoNode.animate({ scrollTop: (highlightindex - 1) * 25 }, 10);
}
});


//给文本框添加键盘按下并弹起的事件
wordInput.keyup(function(event) {
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
console.log(keyCode);


if(keyCode != 38 && keyCode != 40) {
if(keyCode == 13) {
//输入回车
if(highlightindex != -1) {
var com = $autoNode.hide().children("div").eq(highlightindex);
$(this).val(com.attr("data"));
}
} else {
highlightindex = -1;
//输入字母,退格或删除,显示最新的内容
loadDataFlag = 0;
loadAutoNode($(wordInput));
$autoNode.show();
loadDataFlag = 1;
}
}


});
$(document).click(function(event) {
$autoNode.fadeOut();
});


/**
* 返回resource中，以start开始的字符数组
* @param {Object} resource 资源json
* @param {Object} start 匹配开始字符
*/
getStringWithStart = function(resource, start) {
var resultArray = new Array();
if(resource != null) {
for(var i = 0; i < resource.length; i++) {
if(resource[i][nameFiled].indexOf(start) == 0) {
resultArray.push(resource[i]);
}
}
}
return resultArray;
}


/**
* 键盘事件，上下操作后 要高亮显示指定条目且恢复其它条目
* @param {Object} highlightindex 高亮显示的索引
*/
setSelectNodeColor = function(highlightindex) {
$.each($autoNodeChildren, function(index, item) {
if(index == highlightindex) {
$(item).css("background-color", "#FBEC88");
} else {
$(item).css("background-color", "#aaaaaa");
}
});


}


/**
* 重新加载数据
* @param {Object} $ele 指定输入框
*/
loadAutoNode = function($ele) {
var wordText = $ele.val();
var wordNodes = getStringWithStart(allData, wordText);


$autoNode.html("").css("height", "auto");


//循环遍历返回回来的数据               
$.each(wordNodes, function(i, item) {
var wordNode = $(this);
var newDivNode = $("<div>").attr("id", i); //id为索引
newDivNode.attr("data", item[nameFiled]); //数据为valueFiled
newDivNode.css("height", "25px")
.css("line-height", "25px")
.css("width", wordInput.width())
.css("background", "#aaaaaa")
.css("padding-left", "3px")
.css("overflow", "hidden");
newDivNode.html(item[nameFiled]).appendTo($autoNode);


if($autoNode.height() >= 200) {
$autoNode.css("height", "200px").css("overflow-y", "auto");
} else {


}


$autoNodeChildren = $autoNode.children("div");


//添加光标进入事件,高亮节点
newDivNode.mouseenter(function() {
$(this).css("background-color", "#FBEC88");
});


//添加光标移出事件,取消高亮
newDivNode.mouseout(function() {
$(this).css("background-color", "#aaaaaa");
});


//添加光标点击事件
newDivNode.click(function() {
console.log("点击元素....")
var comText = item[nameFiled];
$autoNode.fadeOut();
highlightindex = $(this).attr("id");
console.log("设置highlightindex的值为:" + highlightindex);
wordInput.val(comText);
});
});
}
}
});
});