一个简单的智能感知效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script src="jquery-1.1.2.js"/>
 <script language="javascript">  
  var rowint = 0;   
  function doclick()
  {   
   if(event.keyCode == 40 )
   {  
    if(document.all("hidContent").value == ""){document.all("hidContent").value=document.all("txtContent").value;}        
    if(rowint>0)
    { tabContent.rows[rowint-1].style.background="";}
    if(rowint<tabContent.rows.length)
    {
     tabContent.rows[rowint].style.background="#eeeeee";
     document.all("txtContent").value = tabContent.rows[rowint].innerText;    
    }    
    if(rowint==tabContent.rows.length)
    {
     document.all("txtContent").value=document.all("hidContent").value;
     tabContent.rows[rowint-1].style.background="";
     rowint = -1;
    }
    rowint ++;
   }
   else if(event.keyCode == 38)
   {
    if(rowint>1)
    {
     rowint --;     
     tabContent.rows[rowint-1].style.background="#eeeeee";
     document.all("txtContent").value = tabContent.rows[rowint-1].innerText;  
     if(rowint>0) { tabContent.rows[rowint].style.background="";}
    }
   }
  } 
   function changeContent(obj) 
    {
        if(obj.value != "")
        {//生成所需要的table
            var oml = $.ajax({url:"getContentByValue.aspx?rnd="+Math.random()+"&tmp="+obj.value,saync:false}).responseText;
            if(oml != "")
            {document.all("divFilteContent").innerHTML = oml;}
            else
            {document.all("divFilteContent").innerHTML ="";return;}
        }
    }
 </script>

 </HEAD>

 <BODY onkeydown="doclick();">
  <div>
 <input type="text" id= "txtContent"  width="260px" ><input type="hidden" id="hidContent" onpropertychange="changeContent(this);">
  </div>

  <div id = "divFilteContent">
 <table id="tabContent" width="151" style="border-left: 1px solid grid; border-right: 1px solid grid;border-bottom: 1px solid grid;" cellpadding="0" cellspacing="0">
  <tr>
   <td>1</td>
  </tr>
  <tr>
   <td>2</td>
  </tr>
  <tr>
   <td>3</td>
  </tr>
  <tr>
   <td>4</td>
  </tr>
 </table>
  </div>
 </BODY>
</HTML>

posted @ 2008-04-15 23:51  南阳·源  阅读(563)  评论(1编辑  收藏  举报