解决方案 »

  1.   

    JS代码没有高亮显示,重发一遍.......
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript">
    //清空补全表单
    function clearFill()
    {
    var ul=$("showRes");
    if(len=ul.childNodes.length)
    {
    //window.alert(len);
    for(var i=len-1; i>=0; i--)
    {
    ul.removeChild(ul.childNodes[i]);
    }
    ul.style.display="none";
    }

    }
    //创建XHR
    function getXMLHttpRequest()
    {
    var xmlhttp=null;
    if(window.ActiveXObject)
    {
    xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
    }
    else
    {
    xmlhttp=new XMLHttpRequest();
    }
    return xmlhttp;
    }
    //发送AJAX查询
    function query(type)
    {
    var url="/ciba/niujin-alpha/process.php";
    //查询结果
    if(type==1)
    {
    var data="?enword="+$('enWord').value+"&type="+type+"&rand="+Math.random();
    var en=$('enWord').value;
    //$('enWord').value="";
    }
    //发送Ajax补全
    else if(type==2)
    {
    var data="?enword="+$('enWord').value+"&type="+type+"&rand="+Math.random();
    var en=$('enWord').value;
    }
    //window.alert(type);
    xmlhttp=getXMLHttpRequest();
     if (xmlhttp)
     {
    xmlhttp.open("get", url+data,true);
    //window.alert(url+data);
     xmlhttp.onreadystatechange=function()
    {
    //window.alert(xmlhttp.readyState);

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    var res=xmlhttp.responseText;
    res=eval("("+res+")");
    //window.alert(res.flag);
    if(res.flag==1)
    {
    words= res.result;
    //window.alert(words.length);
    item='';
    for(i in words)
    {
    item += "<p style = ' border: 1px solid gray; width:650px;  background-color:grey; color: #000090;'>"+words[i]+"<p>";
    }
    $("chWord").innerHTML= "<span style='color:#a00000;'>"+en+"</span>"+":<br /> "+item;   
    }
    else if(res.flag==2)
    {
    var parent=document.getElementById("showRes");
    var result=res.result;
    clearFill();
    for(i in result)
    {
    var text=document.createTextNode(result[i]);
    var li=document.createElement("li");
    li.appendChild(text);
    parent.appendChild(li);

    li.onmouseover = function(){  
    this.className = "mouseOver" ;  //鼠标指针经过时高亮  
    }  
    li.onmouseout = function(){  
    this.className = "mouseOut" ;   //鼠标指针离开时恢复原样  
    }  
    li.onclick = function(){  
    //用户单击某个匹配项时、设置输入框为该项的值  
    $("enWord").value = this.firstChild.nodeValue;
    query(1);
    clearFill();  //同时清除提示框  

    }
    }
    parent.style.display="block";
    }
    }

    xmlhttp.send(null); 
     }
    }
    //捕捉回车键,如果是,进行查询
    function sendQuery(event)
    {
    var ul=$("showRes");
    if(ul.style.display=="block") 
    {
    ul.style.display="none";
    }

    query(1);
    return false;
    }//补全时,发送ajax查询
    function sendFill(event)
    {
    var val=$("enWord").value;
    if(val.length >=2 )
    {
    query(2);
    }
    }UlIndex=0;
    function send(event)
    {
    //当检测到按下的是回车键时
    if(event.keyCode == 13)
    {
    sendQuery(event);
    }
    //当检测到按下的是a-z A-Z时
    else if(event.keyCode>=65 && event.keyCode<=90 || event.keyCode>=97&&event.keyCode<=122)
    {
    sendFill(event);
    }
    //当检测到按下的是向下键时
    else if(event.keyCode == 40 || event.keyCode == 39)
    {
    if($("showRes").hasChildNodes())
    {
    var items = $("showRes").childNodes;
    var len = items.length;
    //window.alert(len);
    if(len>0)
    {
    if((UlIndex++) >= len){UlIndex = len;}
    //window.alert(items[UlIndex].firstChild.nodeValue);
    //items[UlIndex%len].onfocus = function(){this.style.backgroundColor="#aabbcc";}
    //event.target.style.background-color="#aabbcc";
    $("enWord").value = items[UlIndex%len].firstChild.nodeValue;
    }
    if(event.keyCode==39)
    {
    sendQuery();
    }

    }

    }
    //当检测到按下的是向上键时
    else if(event.keyCode == 38 || event.keyCode == 39)
    {
    if($("showRes").hasChildNodes())
    {
    var items = $("showRes").childNodes;
    var len = items.length;
    if(len>0)
    {
    if((UlIndex--) <= 0){UlIndex = 0;}
    //items[((--UlIndex)%len)].style.background-color="#aabbcc";
    $("enWord").value = items[(UlIndex%len)].firstChild.nodeValue;
    }
    if(event.keyCode==39)
    {
    sendQuery();
    }

    }

    }
    else if(event.keyCode==8)
    {
    sendFill();
    if($("enWord").value.length<=1)
    {
    clearFill();
    }
    }
    }
    //清空输入框
    function clearContent()
    {
    $("enWord").value="";
    return false;
    }
    function $(id)
    {
    return document.getElementById(id);
    }
    window.onload = function()
    {
    $("enWord").setAttribute("autocomplete", "off");
    $("enWord").focus();
    }
    </script><style rel="stylesheet" type="text/css">
    #outer{margin-left: 400px;}
    #up{margin-top:5px;}
    #his{color:gray;
    font-size:16px;}
    #showRes{
    background-color:white;
    border: 1px solid gray;
    width:650px;
    display:none;
    list-style: none;  
            margin: 0px; padding: 0px;  
    z-index:10;}
    #enWord{
    width:650px;
    height:40px;
    border:2px solid gray;
    margin-top:10px;
    margin-bottom:0px;
    padding: 1px;
    font-size:14px;
    }
    #sendButton{
    width:65px;
    height:35px;
    padding: 1px;
    font-family: Arial,Helvetica,sans-serif;  
    font-size:16px;
    }
    #chWord{position:relative;
    left:10px;
    top:30px;
    width:600px;
    font-size:20px;
    }
     ul{  
            list-style: none;  
            margin: 0px; padding: 0px; 
    z-index:11;
        }  
    li.mouseOver{  
            background-color: #eeeeee;  
            color: #aabbcc;
    font-size:18px;
    font-weight:bold;
        }  
        li.mouseOut{  
            background-color: #FFFFFF;  
            color: #004a7e;  
        }  
    </style>
    </head>
    <body bgcolor="#RGB(67,65,65)">
    <div id="outer">
    <img src="./image/logo.jpg" /><br />
    <div id="up">
    <a href="getHisFromMysql.php" id="his" target="_blank">查询历史</a>
    <a href="./addword/addword.html" id="his" target="_blank">添加词条</a>
    <a href="./dict_info/dict.info.php" id="his" target="_blank">字典信息</a>
    <a href="./friend/friend.html" id="his" target="_blank">发布交友</a>
    <a href="./advice/advice.html" id="his" target="_blank">意见反馈</a>
    </div><input type="text"   id="enWord"   onclick="clearContent();" onkeydown="setTimeout(send(event),300);" onblur="clearFill();"/>
    <input type="button" id="sendButton" value="查询" onclick="query(1);" /><br />
    <ul id="showRes">
    </ul>
    <div id="chWord"><div>
    </div>
    </body>
    </html>
    <!--the problem is when i enter three char, in fact , the js only send two char, it's can observe d by  chrome console , but i had set val=$("enWord").value;if(val.length >=2 ) query(2);then i use setTimeout() to check onkeydown="setTimeout(send(event),300);"  it's seem like not a event catca delay problem-->
      

  2.   

    昨天论坛进不来,去stackflow发过一遍,很快就沉了,仅有一个人回复,说是让我缩减代码,把问题点的代码摘出来,,,,然后,就没有然后了
      

  3.   

     <input type="text"   id="enWord"   onclick="clearContent();" onkeyup="send(event);" onblur="clearFill();"/>
      

  4.   

    最开始用的就是keyup,不管用啊
      

  5.   

    管用,,,,我倒。我最开始就是用的keyup,后来抽风改成了keydown,,,然后没留意到这个问题,结贴给分了
      

  6.   

    设置点延迟就可以了。。
    function keyup(event){
        var that = this;
        setTimeout(function(){
            send.call(that,event);
       },10)
    }
    onkeyup="keyup(event);"