jQuery 自動補全
AutoCompleteCloud.js
//表示當前高亮的節點
var highlightindex = -1;
//延遲請求對應timeout的id
var timeoutId;
//延遲請求的間隔時間
var timeMS = 20;
$(document).ready
(
function()
{
var wordInput = $("#word");
var wordInputOffset = wordInput.offset();
//給div設置顯示時的背景色
$("#auto").css("background-color","white");
//自動補全框最開始應該隱藏起來
$("#auto").hide().css("border","1px black solid").css("position","absolute")
.css("top",wordInputOffset.top + wordInput.height() + 5 + "px")
.css("left",wordInputOffset.left + "px").width(wordInput.width() + 2);
//給文本框添加鍵盤按下並彈起的事件
wordInput.keyup
(
function(event)
{
//處理文本框中的鍵盤事件
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//如果輸入的是字母，應該將文本框中最新的信息發送給服務器
//如果輸入的是退格鍵或刪除鍵，也應該將文本框中的最新信息發送給服務器
//空格鍵爲：32
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46 || keyCode==32)
{
//1.首先獲取文本框中的內容
var wordText = $("#word").val();
var autoNode = $("#auto");
if (wordText != "")
{
//清空上一次未開始執行的請求
clearTimeout(timeoutId);
//延遲 500毫秒 處理
timeoutId = setTimeout(function()
{
//2.將文本框中的內容發送給服務器段
$.ajax(
{
type: "POST",
url: "../servlet/autoCompleteServlet",
data: "word="+wordText,
dataType:"json",
success:function(result)
{
// alert(result);
//進行遍歷,並且讓div顯示
var s="";
//需要清空原來的內容
autoNode.html("");
if(result!=null || result.length>0)
{
$("#auto").show("slow");
$.each(result,function(i){
var newDivNode=$("<div>").attr("id",i);
var city = result[i];
// alert(city.cname);
newDivNode.html(city.cname).appendTo(autoNode);
//增加鼠標進入事件，高亮節點
newDivNode.mouseover
(
function(){
//將原來高亮的節點取消高亮
if(highlightindex != -1){
$("#auto").children("div").eq(highlightindex)
.css("background-color","white");
}
//紀錄新的高亮索引
highlightindex = $(this).attr("id");
//鼠標進入的高亮節點
$(this).css("background-color","#6699CC");
});
//鼠標移出節點，取消高亮
newDivNode.mouseout(
function(){
$(this).css("background-color","white");//取消鼠標移出節點的高亮
}
);
//增加鼠標點擊事件，可以進行點擊
newDivNode.click(
function (){
var comText = $(this).text();//取出高亮節點的文本內容
$("auto").hide("slow");
document.getElementById('auto').style.display='none';
highlightindex = -1;$("#word").val(comText);//文本框中的內容變成高亮節點的內容
}
);
});
}
//如果服務器段有數據返回，則顯示彈出框-------
if (result!=null || result.length>0)
{
autoNode.show("slow");
} else
{
autoNode.hide("slow");
//彈出框隱藏的同時，高亮節點索引值也製成-1
highlightindex = -1;
}
}
}
);
},timeMS);
} else {
//autoNode.hide();
//highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40)
{
//如果輸入的是向上38向下40按鍵
if (keyCode == 38)
{
//向上
var autoNodes = $("#auto").children("div")
if (highlightindex != -1)
{
//如果原來存在高亮節點，則將背景色改稱白色
autoNodes.eq(highlightindex).css("background-color","white");
highlightindex--;
} else
{
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1)
{
//如果修改索引值以後index變成-1，則將索引值指向最後一個元素
highlightindex = autoNodes.length - 1;
}
//讓現在高亮的內容變成紅色
autoNodes.eq(highlightindex).css("background-color","#6699CC");
}
if (keyCode == 40)
{
//向下
var autoNodes = $("#auto").children("div")
if (highlightindex != -1)
{
//如果原來存在高亮節點，則將背景色改稱白色
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if (highlightindex == autoNodes.length)
{
//如果修改索引值以後index變成-1，則將索引值指向最後一個元素
highlightindex = 0;
}
//讓現在高亮的內容變成紅色
autoNodes.eq(highlightindex).css("background-color","#6699CC");
}
} else if (keyCode == 13)
{
//如果輸入的是回車
//下拉框有高亮內容
if (highlightindex != -1)
{
//取出高亮節點的文本內容
var comText = $("#auto").hide("slow").children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的內容變成高亮節點的內容
$("#word").val(comText);
} else
{
//下拉框沒有高亮內容
//alert("文本框中的[" + $("#word").val() + "]被提交了");
$("auto").hide("slow");
$("auto").get(0).blur();
}
}
});
//給按鈕添加事件，表示文本框中的數據被提交
$("input[type='button']").click
(
function()
{
//alert("文本框中的[" + $("#word").val() + "]被提交了");
}
);
}
)
