<!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>模拟google搜索提示</title>
<STYLE type="text/css">
.div_list{
border:1px solid #336600;
width:100px;
position:absolute;
display:none;
background-color:#FFFFFF;
color:#009966;
}
ul{
list-style:none;
margin-left:0px;
}
td{width:100%;}
.li_sel{
width:100%;
background-color:#99FFCC;
cursor:pointer;
}
body{
margin-left:10px;
margin-top:10px;
}
</STYLE>
</head>
<body>
请输入姓名
<INPUT type="text" name="txtName" id="txtName" value=""
onkeyup="HandleKeyUp(this,document.getElementById('divlist'),event)"
onkeydown="HandleKeyDown(document.getElementById('divlist'),event)"
autocomplete="off"
/>
<input type="button" value="提交" onclick="ShowRecord(document.getElementById('txtName').value"/>
<DIV class="div_list" id="divlist" selectindex="-1">dd</DIV>
<SCRIPT language="javaScript">
var xmlhttp;
function SetListPos(oDiv) {//设置列表位置使其在文本况下方
var oInput=document.getElementById("txtName");
if(document.all){
oDiv.style.left=oInput.offsetLeft+10+'px';
oDiv.style.top=oInput.offsetTop+oInput.offsetHeight+10+"px";
oDiv.style.width=oInput.offsetWidth-2+'px';
}
else{
oDiv.style.left=oInput.offsetLeft+'px';
oDiv.style.top=oInput.offsetTop+oInput.offsetHeight+"px";
oDiv.style.width=oInput.offsetWidth-2+'px';
}
}
function FillList(oDiv,strList){
arrList=window.eval(strList);
oDiv.selectindex=-1;//设置选中项目为空
if(arrList.length>0){
var strhtml="<table border=0 style='width:100%'>";
for(var i=0;i<arrList.length;i++){
strhtml+="<tr><td onmouseover=\"this.className='li_sel'\" ";
strhtml+="onmouseout=\"this.className=''\" ";
strhtml+="onclick='Td_click(this,document.getElementById(\"txtName\"),document.getElementById(\"divlist\"))'>"
strhtml+=arrList[i].name+"</td></tr>";
}
strhtml+="</table>";
oDiv.innerHTML=strhtml;
ShowList(document.getElementById('divlist'),'block');
}
else{
ShowList(oDiv,'none');
oDiv.innerHTML="";
}
}
function ShowList(oDiv,strDisplay){
oDiv.style.display=strDisplay;
}
function CreateXmlHttp(){
if(document.all)
return new ActiveXObject("Microsoft.XMLHTTP");
else
return new XMLHttpRequest();
}
function HandleStateChange(){
if(4==xmlhttp.readyState){
var oDiv=document.getElementById("divlist");
if(200==xmlhttp.status){
var strResponse=xmlhttp.responseText;
FillList(oDiv,strResponse);
}
else{
alert("请求发生错误！"+xmlhttp.responseText)
ShowList(oDiv,'[]');
}
}
}
function HandleInputChange(strInput){
if(strInput!=""){
xmlhttp=CreateXmlHttp();
xmlhttp.open("post","google.aspx",true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.onreadystatechange=HandleStateChange;
xmlhttp.send("word=" + escape(strInput));
}
else{
var oDiv=document.getElementById('divlist');
ShowList(oDiv,'none');
oDiv.innerHTML="";
}
}
function Td_click(oTd,oInput,oDiv){
oInput.value=oTd.innerHTML;
ShowList(oDiv,'none');
}
function ChangeListSelect(oDiv,strOperation){
var nItemCount=oDiv.getElementsByTagName('tr').length;
var nSelIndex=parseInt(oDiv.selectindex);
//恢复以前选中的项目
if(nSelIndex!=-1)
oDiv.getElementsByTagName('td')[nSelIndex].className='';
//改变选中项目
var i=strOperation=="push"?1:-1;
if(nSelIndex+i<-1)
oDiv.selectindex=nItemCount-1;
if(nSelIndex+i>=-1 && nSelIndex+i<nItemCount)
oDiv.selectindex=nSelIndex+i;
if(nSelIndex+i>=nItemCount)
oDiv.selectindex=-1
//显示现在选中的项目
nSelIndex=parseInt(oDiv.selectindex);
if(nSelIndex!=-1)
oDiv.getElementsByTagName('td')[nSelIndex].className='li_sel';
}
function HandleKeyUp(oInput,oDiv,e){
var evt=window.event||e;
var keycode=evt.keyCode||evt.witch;
switch(keycode){
case 9://处理tab键（失败，无法触发）
oDiv.style.display='none';
break;
case 13://处理回车键
var nIndex=oDiv.selectindex;
if( nIndex){
oInput.value=oDiv.getElementsByTagName('td')[nIndex].innerHTML;
oDiv.style.display='none';
}
break;
case 38://处理方向键上箭头
ChangeListSelect(oDiv,"pop") ;
break;
case 40://处理方向键下肩头
ChangeListSelect(oDiv,"push") ;
break;
default://处理正常的字符输入
HandleInputChange(oInput.value)
}
}
function HandleKeyDown(oDiv,e){
var evt=window.event||e;
var keycode=evt.keyCode||evt.witch;
if(keycode==9){//处理tab键
oDiv.style.display='none';
}
}
function ShowRecord(strName){
}
SetListPos(document.getElementById('divlist'));
</SCRIPT>
</body>
</html>
源代码-Ajax+XML简单房产程序 v1.0（适合学习ajax+xml）.zip
48 浏览量
2024-05-06
16:36:16
上传
评论
收藏 65KB ZIP 举报
源代码-Ajax+XML简单房产程序 v1.0（适合学习ajax+xml）.zip （29个子文件） 
132684508192050767 
Book1.xls 22KB
CheckLogin.Asp 616B
so.html 5KB Add_House.Asp 2KB google.aspx 1KB aspnet_client system_web 2_0_50727 manage_user.asp 5KB getAttribute.htm 255B cearch_server.asp 4KB add_user.htm 4KB AllHome.Asp 3KB Server.Asp 7KB cearch_home.asp 15KB LeftMenu.Htm 2KB Logout.Asp 53B Login.Htm 5KB server_user.Asp 2KB Index.Htm 2KB right.asp 135B css.css 4KB Inc arealist.xml 440B Check_User.Asp 416B Login.Js 258B add.js 4KB Conn.Asp 589B Public.Js 3KB css.css 4KB Inc.Js 12KB test.asp 79B Data JiaYin.mdb 520KB资源评论
