日期:2014-05-17  浏览次数:20735 次

求大师能给我简化一下代码,实现文本输入自动提示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>suggest.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body {
font: 11px arial;
}

.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6px;
}

.suggest_link_over {
background-color: #E8F2FE;
padding: 2px 6px 2px 6px;
}

#suggest {
position: abslute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
display: none;
}
</style>
<script language="javascript">
var xmlhttp;//声明浏览器初始化对象变量
function searchSuggest(){
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try{
xmhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}catch(e){}
}
}
//判断XMLHttpRequest对象是否成功创建
if(!xmlhttp){
alert("不能创建XMLHttpRequest对象实例");
return false;
}
//创建请求结果处理程序
xmlhttp.onreadystatechange=processReuqest;
var str = document.getElementById("txtSearch").value;
xmlhttp.open("get","SearchSuggest?search="+str,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-type","text/html;charset=utf-8");
xmlhttp.send(null);
}
function processReuqest(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var sobj=document.getElementById("suggest");
sobj.innerHTML="";
var str= xmlhttp.responseText.split("-");
var suggest="";
if(str.length>0&&str[0].length>0){
for(i=0;i<str.length;i++){
suggest+="<div onmouseover='javascript:suggestOver(this);'";
suggest+=" onmouseout='javascript:suggestOut(this);'";
suggest+=" onclick='javascript:setSearch(this.innerHTML);'";
suggest+=" class='suggest_link'>"+str[i]+"</div>"; }
sobj.innerHTML=suggest;
document.getElementById("suggest").style.display="block";
}else{
document.getElementById("suggest").style.display="none";
}
}
}
}
function suggestOver(obj){
obj.className = "suggest_link_over";
}
function suggestOut(obj){
obj.className="suggest_link";
}

</script>
</head>

<body>
<h3>
Ajax实现搜索提示
</h3>
<div style="width: 500px">
<form action="" id="formSearch">
<input type="text" id="txtSearch" name="txtSearch" onkeyup="searchSuggest()" autocomplete="off" />
<input type="submit" id="cmdSearch" name="cmdSearch" value="搜索" />
</br>
<di