目前除了不能用键盘上下键选取提示外基本上已经算是完善了。
不知为何不能得到keyCode,等有空的时候再看看。
一般处理程序部分
<%@ WebHandler Language="C#" Class="AotoClew" %>
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
public class AotoClew : IHttpHandler {
public void ProcessRequest (HttpContext context) {
IList<string> list = new List<string>();
for (int i = 0; i < 10; i++)
{
list.Add("测试自动提示"+(i+1));
}
context.Response.ContentType = "text/plain";
for (int i = 0; i < list.Count; i++)
{
context.Response.Write("<span id=/"span"+(i+1)+"/" name=/"aotoClew/" οnclick=/"toInput('span"+(i+1)+"')/" οnmοuseοver=/"mouseOver('span"
+(i+1)+"')/" οnmοuseοut=/"mouseOut('span"+(i+1)+"')/">" + list[i] + "</span><br />");
}
}
public bool IsReusable {
get {
return false;
}
}
}
jQuery脚本部分
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
//为文本框注册按下事件
$("#txt1").keydown(function(){
if($("#txt1").val().length>2){//当输入内容大于2个字节的时候发送请求
$.get("AotoClew.ashx",null,function(response){
$("#div1").html(response);//将返回内容填充到div中
$("#div1").css("display","block");//控制div显示
});
}
});
//设置弹出提示层的位置
var offset=$("#txt1").offset();
$("#div1").css("left",offset.left);
$("#div1").css("top",offset.top+25);
//当文本框失去焦点的时候隐藏div
$("#txt1").blur(function(){
var x=event.clientX;//得到鼠标的坐标
var y=event.clientY;
var left=offset.left;
var right=left+160;//当层的大小改变的时候记得改变此处的值
var top=offset.top;
var down=top+180;//此处同上,需同时修改
if(x>=left&&x<=right&&y>=top&&y<=down){
}else{
$("#div1").css("display","none");//控制div隐藏
}
});
});
//点击时将内容输入到文本框,同时隐藏div
function toInput(spanId){
$("#txt1").val($("#"+spanId).text());
$("#div1").css("display","none");
}
//鼠标移上去时背景色的变化
function mouseOver(spanId){
$("#"+spanId).css("background-color","#CCCCCC");
}
//鼠标移走后的背景色变化
function mouseOut(spanId){
$("#"+spanId).css("background-color","#FFFFFF");
}
//var num=1;
//function upAndDown(){
// mouseOver("span"+num);
// num++;
//}
如果按下的为上下方向键,则调用键盘选择的事件
//if(event.keyCode==38){alert("ttt");
// upAndDown();
//}
</script>
HTML脚本部分
<input type="text" id="txt1" />
<div id="div1" style="position:absolute;display:none;width:160px;height:180px;Cursor:hand">
<span id="span1" οnclick="test('span1')" οnmοuseοver="mouseOver('span1')" οnmοuseοut="mouseOut('span1')">原始内容1</span><br />
<span>原始内容1</span><br />
<span>原始内容1</span><br />
<span>原始内容1</span><br />
</div>
================================================================
2010年12月15日3:03:14更新,已支持用键盘选择。以下为整个测试网页,就不往外抽取了。
================================================================
<!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><title>
无标题页
</title>
<script language="javascript" type="text/javascript">
//创建XMLHttpRequest
function createXmlGttpRequest(){
if(window.ActiveXObject){//IE浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//非IE浏览器
return new XMLHttpRequest();
}
}
//发送请求
var xmlHttpRequest;//声明XMLHttpRequest对象
function toSendRequest(){
xmlHttpRequest=createXmlGttpRequest();
xmlHttpRequest.onreadystatechange=callbackFun;//设置回调函数,当xmlHttpRequest对象的状态改变时调用callbackFun这个函数
//初始化XMLHttpRequest组件;第三个参数表示同步(false)or异步(true),异步表示调用send方法发送请求后不用等待请求响应继续执行后面的Javascript代码。
xmlHttpRequest.open("GET","Ajax.ashx?name=name1&pass=pass1",true);
xmlHttpRequest.send(null);//发送请求
}
//回调函数
function callbackFun(){
//readyState共有5种状态,0未初始化,1已初始化,2发送请求,3开始接收结果,4接收结果完毕。
//status服务器响应状态码。
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
alert(xmlHttpRequest.responseText);
}else{
//出现异常
}
}
</script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
//为文本框注册按下事件
$("#txt1").keydown(function(){
if($("#txt1").val().length>2){//当输入内容大于2个字节的时候发送请求
$.get("AotoClew.ashx",null,function(response){
$("#div1").html(response);//将返回内容填充到div中
$("#div1").css("display","block");//控制div显示
});
}
});
//当按键释放时触发,press不好使,貌似与keydown冲突。
$("#txt1").keyup(function(){
var divDisplay=$("#div1").css("display");
if(divDisplay=="block"){
upAndDown();
}
});
//设置弹出提示层的位置
var offset=$("#txt1").offset();
$("#div1").css("left",offset.left);
$("#div1").css("top",offset.top+25);
//当文本框失去焦点的时候隐藏div
$("#txt1").blur(function(){
var x=event.clientX;//得到鼠标的坐标
var y=event.clientY;
var left=offset.left;
var right=left+160;//当层的大小改变的时候记得改变此处的值
var top=offset.top;
var down=top+180;//此处同上,需同时修改
if(x>=left&&x<=right&&y>=top&&y<=down){
}else{
$("#div1").css("display","none");//控制div隐藏
}
});
});
//点击时将内容输入到文本框,同时隐藏div
function toInput(spanId){
$("#txt1").val($("#"+spanId).text());
$("#div1").css("display","none");
}
//鼠标移上去时背景色的变化
function mouseOver(spanId){
$("#"+spanId).css("background-color","#CCCCCC");
}
//鼠标移走后的背景色变化
function mouseOut(spanId){
$("#"+spanId).css("background-color","#FFFFFF");
}
var num=1;
//如果按下的为上下左方向键,则调用键盘选择的事件
function upAndDown(){
//$("#spanTest1").html($("#spanTest1").html()+num+"<br/>");
if(event.keyCode==38){
mouseOver("span"+num);
if(num<=1){
num=1;
}else{
num--;
}
}else if(event.keyCode==40){
mouseOver("span"+num);
if(num>=10){
num=10;
}else{
num++;
}
}else if(event.keyCode==39){//右方向键上屏
toInput("span"+(num-1));
}
}
</script>
<style type="text/css">
body,td,th {
font-size: 12px;
}
</style>
</head>
<body>
<form name="form1" method="post" action="Ajax.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGSvRFw70AFvjBoXTZvDYjqV90qcTQ==" />
</div>
<div>
<input type="button" id="Button1" οnclick="toSendRequest()" value="测试Ajax" />
<br/><br/><br/>
<input type="text" id="txt1" />
<div id="div1" style="position:absolute;display:none;width:160px;height:180px;Cursor:hand">
<span id="span1" οnclick="test('span1')" οnmοuseοver="mouseOver('span1')" οnmοuseοut="mouseOut('span1')">原始内容1</span><br />
<span>原始内容1</span><br />
<span>原始内容1</span><br />
<span>原始内容1</span><br />
</div>
<input type="button" id="Button2" οnclick="alert(event.clientX)" value="得到鼠标的坐标" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span id="spanTest1">测试执行了几遍<br /></span><br />
</div>
</form>
</body>
</html>