AJAX实现类Google Suggest效果求助

用的草履虫AJAX实现类Google Suggest效果
共三个文件：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"> 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>草履虫---简易Google Suggest</title>
<link type="text/css" rel="stylesheet" href="suggest.css"/>
<script type="text/javascript" src="suggest.js"></script>
  </head>
  <body onclick="hide_suggest();">
   <img src="suggest.gif" onclick="hide_suggest();" />
   <form action="result.asp" method="post" name="search" autocomplete="off">
   <input type="text" name="keyword" id="keyword" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
<input type="submit" value="手气不错"/>
<div id="suggest"></div>
   </form>
  </body>
</html>
var j=-1;
var temp_str;
var $=function(node){
return document.getElementById(node);
}
var $$=function(node){
return document.getElementsByTagName(node);
}
function ajax_keyword(){
var xmlhttp;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
var data=xmlhttp.responseText;
$("suggest").innerHTML=data;
j=-1;
}
}
}
xmlhttp.open("post", "ajax_result.asp", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
xmlhttp.send("keyword="+escape($("keyword").value));
}
function keyupdeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc!=40 && keyc!=38){
ajax_keyword();
temp_str=$("keyword").value;
}
} function set_style(num){
for(var i=0;i<$$("li").length;i++){
var li_node=$$("li")[i];
li_node.className="";
}
if(j>=0 && j<$$("li").length){
var i_node=$$("li")[j];
$$("li")[j].className="select";
}
}
function mo(nodevalue){
j=nodevalue;
set_style(j);
}
function form_submit(){
if(j>=0 && j<$$("li").length){
$$("input")[0].value=$$("li")[j].childNodes[0].nodeValue;
}
document.search.submit();
}
function hide_suggest(){
var nodes=document.body.childNodes
for(var i=0;i<nodes.length;i++){
if(nodes[i]!=$("keyword")){
$("suggest").innerHTML="";
}
}
}

function keydowndeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc==40 || keyc==38){
if(keyc==40){
if(j<$$("li").length){
j++;
if(j>=$$("li").length){
j=-1;
}
}
if(j>=$$("li").length){
j=-1;
}
}
if(keyc==38){
if(j>=0){
j--;
if(j<=-1){
j=$$("li").length;
}
}
else{
j=$$("li").length-1;
}
}
set_style(j);
if(j>=0 && j<$$("li").length){
$("keyword").value=$$("li")[j].childNodes[0].nodeValue;
}
else{
$("keyword").value=temp_str;
}
}
}
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<% Response.CodePage=65001%>  
<%
'-----------------------------------------------------------------
   response.charset = "utf-8"
dim keyword
keyword=cstr(trim(request.Form("keyword"))) '接收ajax发送的参数
if keyword="" then response.End()
'------------------------------------------------------------------
    dim dbdriver,dbpath,conn,rs,sql
    dbdriver="microsoft.jet.oledb.4.0"
    dbpath=server.mappath("search.mdb")
    set conn=server.CreateObject("adodb.connection")
    conn.provider=dbdriver
    conn.open dbpath
set rs=server.CreateObject("adodb.recordset")
sql="select * from search where keyword like '"&keyword&"%' order by searchtimes desc"
rs.open sql,conn,1,1
'------------------------------------------------------------------
'--------如果没有找到的话,返回0
'--------如果找到的话,返回所有匹配的项目
if not (rs.eof and rs.bof) then
response.Write("<ul>")
for i=0 to 9
if rs.eof then exit for
response.Write("<li value="""&i&""" onclick=""form_submit()"" onmouseover=""mo(this.value)"">"&rs("keyword")&"<span>约"&rs("matchnum")&"结果</span></li>")
rs.movenext
next
response.Write("</ul>")
end if
rs.close
set rs=nothing
%>

解决方案 »

  1.   

    如果我是放在循环中去做页面要输出5个文本框，各自获取各自的应该怎么去修改他的js呢？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8"> 
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>草履虫---简易Google Suggest</title>
    <link type="text/css" rel="stylesheet" href="suggest.css"/>
    <script type="text/javascript" src="suggest.js"></script>
      </head>
      <body onclick="hide_suggest();">
       <img src="suggest.gif" onclick="hide_suggest();" />
       <form action="result.asp" method="post" name="search" autocomplete="off">
       <input type="text" name="keyword1" id="keyword1" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
    <input type="text" name="keyword2" id="keyword2" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
    <input type="text" name="keyword3" id="keyword3" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
     <input type="text" name="keyword4" id="keyword4" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
    <input type="text" name="keyword5" id="keyword5" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);"/>
    <input type="submit" value="手气不错"/>
    <div id="suggest"></div>
       </form>
      </body>
    </html>
      

  2.   

    太长了 onkeyup="keyupdeal(this,event);" 把组件自己传过去 在js中如果想获取每一个keyword的属性不管是keyword1还是keyword5 只要使用this就可以了 
      

  3.   

    我也知道通过this来做啊
    但是就是那个js我怎么改都不对
      

  4.   

    看这里：http://www.vulgarisoip.com/2007/08/06/jquerysuggest-11/
      

  5.   

    用ajax控件AutoComplete 参考
      

  6.   

    关键是他用
    var $=function(node){
    return document.getElementById(node);
    }
    xmlhttp.send("keyword="+escape($("keyword").value));
    这样去发送的，我怎么用this去替代？
      

  7.   

    加个参数<input type="text" name="keyword2" id="keyword2" onkeyup="keyupdeal(event, this);" onkeydown="keydowndeal(event, this);" onclick="keyupdeal(event, this);"/>
    function keyupdeal(e, obj){
       ...
       ajax_keyword(obj.value);
       ...
    }function ajax_keyword(keyword){
       ...
       xmlhttp.send("keyword="+escape(keyword));
    }
      

  8.   

            var j=-1;
            var temp_str;
            var $=function(node){
                return document.getElementById(node);
            }
            var $$=function(node){
                return document.getElementsByTagName(node);
            }
            function ajax_keyword(){
                var xmlhttp;
                try{
                    xmlhttp=new XMLHttpRequest();
                    }
                catch(e){
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4){
                    if (xmlhttp.status==200){
                        var data=xmlhttp.responseText;
                        $("suggest").innerHTML=data;
                        j=-1;
                        }
                    }
                }
                xmlhttp.open("post", "ajax_result.asp", true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");
                xmlhttp.send("keyword="+escape($("keyword").value));
            }
            function keyupdeal(e){
                var keyc;
                if(window.event){
                    keyc=e.keyCode;
                    }
                else if(e.which){
                    keyc=e.which;
                    }
                if(keyc!=40 && keyc!=38){
                    ajax_keyword();
                    temp_str=$("keyword").value;
                }
                }        function set_style(num){
                for(var i=0;i<$$("li").length;i++){
                    var li_node=$$("li")[i];
                    li_node.className="";
                }
                if(j>=0 && j<$$("li").length){
                    var i_node=$$("li")[j];
                    $$("li")[j].className="select";
                    }
                }
            function mo(nodevalue){
                j=nodevalue;
                set_style(j);
            }
            function form_submit(){
                if(j>=0 && j<$$("li").length){
                    $$("input")[0].value=$$("li")[j].childNodes[0].nodeValue;
                    }
                document.search.submit();
            }
            function hide_suggest(){
                var nodes=document.body.childNodes
                for(var i=0;i<nodes.length;i++){
                    if(nodes[i]!=$("keyword")){
                        $("suggest").innerHTML="";
                        }
                    }
                }
                
    function keydowndeal(e){
                var keyc;
                if(window.event){
                    keyc=e.keyCode;
                    }
                else if(e.which){
                    keyc=e.which;
                    }
                if(keyc==40 || keyc==38){
                if(keyc==40){
                    if(j<$$("li").length){
                        j++;
                        if(j>=$$("li").length){
                            j=-1;
                        }
                    }
                    if(j>=$$("li").length){
                            j=-1;
                        }
                }
                if(keyc==38){
                    if(j>=0){
                        j--;
                        if(j<=-1){
                            j=$$("li").length;
                        }
                    }
                    else{
                        j=$$("li").length-1;
                    }
                }
                set_style(j);
                if(j>=0 && j<$$("li").length){
                    $("keyword").value=$$("li")[j].childNodes[0].nodeValue;
                    }
                else{
                    $("keyword").value=temp_str;
                    }
                }
            }
    我还是不知道这个该怎么去替换，他都用
    $("keyword").value
    代表文本框的值？
    我都换成this.value又不行
      

  9.   

    这么改啊，sos sos
    死活改不对