文字框下拉提示效果（模擬百度效果提示框）
實現思想：當用戶在文字框中輸入時，可以利用ajax方式將文字框內內容傳給後臺的實現類，在實現類中經過處理後將產生的結果獲取過來在前臺呈現。具體操作可通過ajax將文字框的值通過ajax實現框架傳遞給系統後端獲得提示結果集，然後在文字框下側一下拉框的效果顯示出來供使用者選擇。
實現程式碼：（當前程式碼只實現前端部分，後端結果集是虛擬出來，貼上複製可直接看見效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試編寫文字下拉提示框</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
//建立下拉結果div
var $resultDiv = $('<div id="resultDiv"></div>');
$resultDiv.css("position","absolute");
$resultDiv.css("border","solid 1px #CCCCCC");
//建立下拉結果ul
var $resultUl = $('<ul id="resultUl"></ul>');
$resultUl.css("margin","0")
$resultUl.css("list-style","none");
$resultUl.css("padding","0");
//建立下拉結果
var $resultLi = [];
var currentTxt;
function pinyinCallback(data) {
$("#resultDiv").show();
$resultUl.html("");
//載入ajax返回的結果集
for (var i = 0;i<data.length; i++) {
$resultLi[i] = $("<li></li>");
$resultLi[i].html(data[i]);
$resultUl.append($resultLi[i]);
}
//隱藏下框
if ($resultUl.html() == "") {
$("#resultDiv").hide();
}
//獲得文字位置
var input=$("#test");
var offset = input.offset();
var left=offset.left+1;
var top = offset.top+input.height()+4;
var width=input.width()+2;
//設定下拉框的位置--文字框下側
$resultDiv.css("top",top);
$resultDiv.css("left",left);
$resultDiv.css("width",width);
$resultUl.appendTo($resultDiv);
$resultDiv.appendTo($("#selectdiv"));
//下拉框框失去焦點時隱藏下拉框
$("#resultDiv").blur(function () {
$("#resultDiv").hide();
});
//文字框失去焦點時隱藏下拉框
$("#test").blur(function () {
$("#resultDiv").hide();
});
//設定li的事件和屬性
$("#resultDiv li").click(function (event) {
$("#test").val($(this).text());
});
$("#resultDiv li").hover(function () {
$(this).css("background-color","#EBEBEB");
}, function () {
$(this).css("background-color","#FFFFFF");
});
$("#resultDiv li").css("cursor","pointer");
$("#resultDiv li").css("background-color","#FFFFFF");
//鍵盤上下鍵控制
var index = -1; //標記上下鍵時所處位置
document.documentElement.onkeydown = function (e) {
e = window.event || e;
if (e.keyCode == 40) { //下鍵操作
if (++index == $("#resultDiv li").length) { //判斷加一操作後index值是否超出列表數目界限
index = -1; //超出的話就將index值變為初始值
$("#test").val(currentTxt); //並將文字框中值設為使用者用於搜尋的值
$("#resultDiv li").css("background-color","#FFFFFF");
}
else {
$("#test").val($($("#resultDiv li")[index]).text());
$($("#resultDiv li")[index]).siblings().css("background-color","#FFFFFF").end().css("background-color","#EBEBEB");
}
}
if (e.keyCode == 38) { //上鍵操作
if (--index == -1) { //判斷自減一後是否已移到文字框
$("#test").val(currentTxt);
$("#resultDiv li").css("background-color","#FFFFFF");
}
else if (index == -2) { //判斷index值是否超出列表數目界限
index = $("#resultDiv li").length - 1;
$("#test").val($($("#resultDiv li")[index]).text());
$($("#resultDiv li")[index]).siblings().css("background-color","#FFFFFF").end().css("background-color","#EBEBEB");
}
else {
$("#test").val($($("#resultDiv li")[index]).text());
$($("#resultDiv li")[index]).siblings().css("background-color","#FFFFFF").end().css("background-color","#EBEBEB");
}
}
if (event.keyCode == 13) {//按下enter建去當前選中的值
$("#resultDiv").hide();
}
};
}
$(document).ready(function(){
$("#test").keyup(function (e) {
if (e.keyCode != 40 && e.keyCode != 38&&e.keyCode!= 13) {
//虛擬結果結果集，實際操作中通過ajax從資料庫中獲取
var list=new Array();
list[0]="aaaaaa";
list[1]="bbbbbb";
list[2]="cccccc";
list[3]="dddddd";
list[4]="eeeeee";
list[5]="ffffff";
currentTxt= $("#test").val();
pinyinCallback(list);
}
}).focus(function () {
this.select();
});
});
</script>
</head>
<body>
<div id="selectdiv">
<input type="text" id="test"/>
</div>
</body>
</html>