前端代码:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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="style/jquery-1.11.1.min.js"></script>
<style>
body {
background-color:#FFFFFF;
}
.STYLE1 {color: #FF0000}
.nocartlist {
display:none;
PADDING-top: 0px;
z-index: 9999;
position: absolute;
}
.cartlist {
background-color: #CCCCCC;
}
.cartlistm {
background-color: #FFFFFF;
}
</style>
<script language=javascript>
$(document).ready(function(){ //文档就绪
x=$("#huiyuan2").offset(); //取输入框的位置
x.top=x.top+$("#huiyuan2").height()+10;
$("#minicart2").offset(x); //显示区位置为输入框位置向下10,左右对齐
$("#huiyuan2").focus(function(){ //输入框获得焦点
$("#minicart2").show(); //显示区 显示
});
$("#huiyuan2").keyup(function(){ //输入框 键盘抬起
txt=$("#huiyuan2").val(); //取输入框的值
txt2=$("#gys_lx").val(); //取选择框的值
$("#mycartlist").load("style/aa.asp", {gyslx:txt2,keyword:txt});
//后台查数据库得到经销商的名称和地址,并返回到显示列表
$("#gys_lx").focus();//发现问题后添加
$("#huiyuan2").focus();//发现问题后添加 切换焦点
});
$("#huiyuan2").blur(function(){ //输入框失去焦点
$("p").mousedown(function(){ //鼠标点击显示列表中的<p>
x=$(this).attr("name"); //取显示列表<p>的name
$("#huiyuan2").val($("span#"+x).text()); //根据name取对应<span>中的文字给输入框
$("#huiyuan").val(x); //把name给隐藏输入框
});
$("#minicart2").hide(); //显示区 隐藏
});
});
</script>
</head>
<body>
经销商类型:
<select id="gys_lx" name="gys_lx" >
<option value="0" >所有类型</option>
<option value="代理" >所有代理</option>
<option value="分销" >所有分销</option>
<option value="洒店" >所有洒店</option>
</select>
经销商名称:
<span> <input id="huiyuan2" type="text" name="huiyuan2" size="38" value="" >
<input type="button" value="清空" class="button" onClick="huiyuan2.value='';huiyuan.value='';">
<input id="huiyuan" type="hidden" name="huiyuan" value="">
<div id="minicart2" class="nocartlist">
<div style="width:262px;height:auto;background-color: #ffffff;border-right:#cccccc 2px solid;border-left:#cccccc 2px solid;border-bottom:#cccccc 2px solid;line-height:38px;text-align:left;) ">
<div id="mycartlist" style=" padding-top:1px">
</div>
</div>
</div>
</span>
</body>
</html>
后台代码,去掉了数据库部分,是生成10条提示
<%@ CODEPAGE=65001 %>
<% Response.CodePage=65001%>
<%Session.Codepage=65001%>
<% Response.Charset="utf-8" %>
<%
gyslx=request("gyslx")
keyword=request("keyword")
restkk=""
if keyword="" then
response.write restkk
response.End()
end if
x=1
do while x<10
restkk=restkk&"<p class='cartlist' name='"&x&"' onMouseOver='this.className="cartlistm"' onMouseOut='this.className="cartlist"'><span id='"&x&"' style='width:100'>名称:"&x&gyslx&"</span><span>地址:"&x&"</span></p>"
x=x+1
loop
response.write restkk
%>
现在的问题是,输入字符后,可以出现提示内容,但是鼠标点击后,所选内容无法写到输入框中,但是使输入框失去焦点后,再点击输入框后就可以选择。如果按下键盘出现新的提示后又无法选择了。
如果在代码中让输入框失去焦点再得到焦点,好像又不行。
下面是测试网页,可看到错误状态。
测试网页