//表示当前高亮的节点var heightLightIndex = -1;var timeoutId;$(document).ready(function(){ var wordInput = $("#word"); var wordInputOffset = wordInput.offset(); //自动补全框最开始应该隐藏起来 $("#auto").hide().css("border","1px black solid") .css("position","absolute") .css("left",wordInputOffset.left + "px") .css("top",wordInputOffset.top + wordInput.height() + 5 + "px") .width(wordInput.width() + 4); //给文本框添加键盘按下并弹起的事件 wordInput.keyup(function() { //如果输入的内容不为空，刚将数据发送给服务器 if(wordInput.val() == "" ) { //当框隐藏时，高亮框的索引值应为-1,表示没有高亮显示的 heightLightIndex = -1; $("#auto").hide(); return; } var keyCode = event.keyCode; //如果输入的是向上38向下40键刚将选中的内容赋值给输入框 if(wordInput.val() != "" && (keyCode == 38 || keyCode == 40)) { //alert("sdfdsf"); if(keyCode == 38) { //向上 var autoNodes = $("#auto").children("div"); if(heightLightIndex != -1) { autoNodes.eq(heightLightIndex).css("background-color","white"); } //改变要高亮显示的节点的索引值 if(heightLightIndex == 0) { //如果修改索引值以后index变为-1，则将索引值指向最后一个元素 heightLightIndex = autoNodes.length - 1; } else { heightLightIndex--; } autoNodes.eq(heightLightIndex).css("background-color","red"); } if(keyCode == 40) { //向下 var autoNodes = $("#auto").children("div"); if(heightLightIndex != -1) { autoNodes.eq(heightLightIndex).css("background-color","white"); } //改变要高亮显示的节点的索引值 if(heightLightIndex == autoNodes.length - 1) { //如果修改索引值以后index变为-1，则将索引值指向最后一个元素 heightLightIndex = 0; } else { heightLightIndex++; } autoNodes.eq(heightLightIndex).css("background-color","red"); } return; } else if(keyCode == 13) { //如果按下的是回车键 $("#auto").hide(); //下拉框有高亮内容 if(heightLightIndex != -1) { var comText = $("#auto").children("div").eq(heightLightIndex).text(); heightLightIndex = -1; $("#word").val(comText); } else { //下拉框没有高亮内容 alert("数据[" + $("#word").val() + "]正在搜索,请稍后....."); //让文本框失去焦点 $("#word").get(0).blur(); } return; } //1.首先获取文本框中的内容 var wordText = $("#word").val(); //对上次未完成的延时操作进行取消 clearTimeout(timeoutId); //将和服务器进行操作延迟500毫秒 timeoutId = setTimeout(function(){ //2.将文本框的内容发送给服务器 $.post("AutoComplete",{word:wordText},function(data){ //将dom对象输入成JQuery对象 var jqueryObj = $(data); //找到所有的word节点 var wordNodes = jqueryObj.find("word"); //遍历所有的word节点，取出所有的单词内容，然后将单词内容添加到弹出框中 var autoNode = $("#auto"); //需要清空原来的内容 autoNode .html(""); wordNodes.each(function(i){ //获取单词的内容 var wordNode = $(this); //新建div节点，将单词内容加入到新建的节点中 //将新建的节点加入到弹出框的节点中 var newDivNode = $("<div>").attr("id",i); newDivNode.html(wordNode.text()).appendTo(autoNode); //增加鼠标进入事件，高亮节点 newDivNode.mouseover(function(){ //将原来的节点取消高亮显示 if(heightLightIndex != -1) { $("#auto").children("div").eq(heightLightIndex).css("background-color","white"); } //记录新的高亮显示节点索引 heightLightIndex = $(this).attr("id"); //鼠标进入的节点高亮 $(this).css("background-color","red"); }); //增加鼠标移出事件，取消高亮显示节点 newDivNode.mouseout(function(){ //取消当前节点的高亮显示 $(this).css("background-color","white"); }); //鼠标点击当前节点，可以进行补全 newDivNode.click(function(){ //var comText = $("#auto").children("div").eq(heightLightIndex).text(); heightLightIndex = -1; //$("#word").val(wordNode.text()); $("#word").val($(this).text()); $("#auto").hide(); }); }); //让弹出框进行显示(当服务器端有数据返回的时候) if(wordNodes.length > 0) { $("#auto").show(); } else { //当框隐藏时，高亮框的索引值应为-1,表示没有高亮显示的 heightLightIndex = -1; $("#auto").hide(); } },"xml"); });},500); //给搜索按钮添加单击事件 $("input[type='button']").click(function(){ alert("数据[" + $("#word").val() + "]正在搜索,请稍后....."); });});
