|
实现思想：当用户在文本框中输入时，可以利用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>
| 
转播
