Div problem in html?

Jul 2 2011 12:46 AM

I have developed autocomplete using html,javascript,webservice.It working properly but problem is,
the div is compressed on keydown(up arrow,down arrow)
code:

<!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>Table row highlight on using arrow keys and mouseover with Javascript</title>
<style>

.row{

    background-color:white;

}

.highlight{

    background-color:blue;
    cursor:pointer;

}

</style>
<script language="javascript">
var mySplitResult
var f_str1
var nameVal = new Array();
var current_row
var count=0
current_row=1;

    function keyDown(e) {

        var evt=(e)?e:(window.event)?window.event:null;
        if(evt){
            var key=(typeof event!='undefined')?window.event.keyCode:e.keyCode;

            if(key==38){
              id1=document.getElementById('row'+parseInt(current_row));
               id1.className='row';
                var rowCount = document.getElementById("sup_tbl").getElementsByTagName("TR").length;

                current_row=current_row-1;

                if(current_row==0){
                 current_row=rowCount;
                }

                for(i = 1; i < rowCount+1; i++){
                id1=document.getElementById('row'+parseInt(current_row));
                if(i==current_row){

                    id1.className='highlight';

                var cell1 = document.getElementById('sup_tbl').getElementsByTagName('td')[current_row-1];

                           cell1Content = cell1.firstChild.data;

                           cell1Content = cell1.firstChild.nodeValue;

                           cell1Content = cell1.innerHTML;

                           cell1Content = cell1.innerText || cell1.textContent;

                           document.getElementById("txt1").value=cell1Content;

                           break;

                }
                else{
                  // alert("delight row" +(current_row-1));
                    id1.className='row';
                }

            }



       }




    else if(key==40){
                 if(current_row==0){
                id1=document.getElementById('row'+parseInt(current_row+1));


                   id1.className='highlight';






                   var cell1 = document.getElementById('sup_tbl').getElementsByTagName('td')[current_row];

                           cell1Content = cell1.firstChild.data;

                           cell1Content = cell1.firstChild.nodeValue;

                           cell1Content = cell1.innerHTML;

                           cell1Content = cell1.innerText || cell1.textContent;

                           document.getElementById("txt1").value=cell1Content;


                            current_row=current_row+1;

                }

else{

              id1=document.getElementById('row'+parseInt(current_row));
               id1.className='row';
                var rowCount = document.getElementById("sup_tbl").getElementsByTagName("TR").length;

                current_row=current_row+1;

                if(current_row==rowCount+1){
                 current_row=1;
                }

                for(i = 1; i < rowCount+1; i++){
                id1=document.getElementById('row'+parseInt(current_row));
                if(i==current_row){

                    id1.className='highlight';




                    var cell1 = document.getElementById('sup_tbl').getElementsByTagName('td')[current_row-1];

                           cell1Content = cell1.firstChild.data;

                           cell1Content = cell1.firstChild.nodeValue;

                           cell1Content = cell1.innerHTML;

                           cell1Content = cell1.innerText || cell1.textContent;

                           document.getElementById("txt1").value=cell1Content;

                           break;



                }
                else{
                  // alert("delight row" +(current_row-1));
                    id1.className='row';
                }

}
            }

       }


    }
}
document.onkeydown=keyDown;

function showHint(str)
    {


      str=document.getElementById("txt1").value





      if(str.length==0){
      document.getElementById("intellisense_div1").style.visibility = "hidden";
      }
      if(str.length>0){
       document.getElementById("intellisense_div1").style.visibility = "visible";
      }
        if (str.length==0)
          {
           document.getElementById("intellisense_spanHint").innerHTML="";
           document.getElementById("intellisense_div1").style.visibility = "hidden";
          return;
          }

        if (window.XMLHttpRequest)
          {
          xmlHttp=new XMLHttpRequest();
          }
        else // for older IE 5/6
          {
          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }

//          var prefixText=str;
          if(str.charAt(0)==" "){
            str=str.replace(" ","");
            if(str.charAt(0)==" "){
              str=str.replace(" ","");
          }
        }
          str=str.replace(" ","*");
          str=str.replace(" ","*");
          str=str.replace(" ","*");
          str=str.replace(" ","*");


        var url= "trail.asmx/GetCustomers?prefixText="+str+"
//         var url= "trail.asmx/GetCustomers?prefixText="+str+"
        xmlHttp.open("GET",url,false);
        xmlHttp.send();

        var myString = xmlHttp.responseText;
        //alert(myString);
        myString = myString.replace('<?xml version="1.0" encoding="utf-8"?>','')
        myString = myString.replace('<string xmlns="http://microsoft.com/webservices/">','')
        myString = myString.replace('</string>','')


        mySplitResult = myString.split("**");
       // alert(mySplitResult);

        nameVal = myString.split("**");

        document.getElementById("intellisense_spanHint").innerHTML = "";

        var f_str;
        f_str = "";

        for(i = 0; i < mySplitResult.length-1; i++){
            //alert(mySplitResult[i] + ' ** ' + str + ' ** ' );
//       current_row=i;
            if (i==0)


//            f_str += "<li style='list-style-type:none;padding-left:5px;'><b>" + mySplitResult[i].substr(0,str.length+2) + "</b>" + mySplitResult[i].substr(str.length+2,mySplitResult[i].length) + "</li>"
//            else
//            f_str += "<li style='list-style-type:none;padding-left:5px;'><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</li>"javascript:formCheck();


             f_str +="<tr><td class='row'; id='row1'; onmouseover=this.className='highlight';current_row=1; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length+2) + "</b>" + mySplitResult[i].substr(str.length+2,mySplitResult[i].length) + "</td></tr>"
             else if(i==1)
             f_str +="<tr><td class='row'; id='row2'; onmouseover=this.className='highlight';current_row=2; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
             else if(i==2)
             f_str +="<tr><td class='row'; id='row3'; onmouseover=this.className='highlight';current_row=3; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
             else if(i==3)
             f_str +="<tr><td class='row'; id='row4'; onmouseover=this.className='highlight';current_row=4; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
             else if(i==4)
             f_str +="<tr><td class='row'; id='row5'; onmouseover=this.className='highlight';current_row=5; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
              else if(i==5)
             f_str +="<tr><td class='row'; id='row6'; onmouseover=this.className='highlight';current_row=6; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
              else if(i==6)
             f_str +="<tr><td class='row'; id='row7'; onmouseover=this.className='highlight';current_row=7; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
              else if(i==7)
             f_str +="<tr><td class='row'; id='row8'; onmouseover=this.className='highlight';current_row=8; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
              else if(i==8)
             f_str +="<tr><td class='row'; id='row9'; onmouseover=this.className='highlight';current_row=9; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"
              else
             f_str +="<tr><td class='row'; id='row10'; onmouseover=this.className='highlight';current_row=10; onmouseout=this.className='row'; onclick='return validate1()';><b>" + mySplitResult[i].substr(0,str.length) + "</b>" + mySplitResult[i].substr(str.length,mySplitResult[i].length) + "</td></tr>"

//<tr bgcolor="#FFFFFF"><td class="row" id="row1" onmouseover="this.className='highlight'; current_row=1" onmouseout="this.className='row'">Rizwan Liaquat</td></tr>

      }

//      var f_str1
//      alert(f_str);

       f_str1 = "<table id='sup_tbl'>" + f_str + "</table>"

//      f_str1 = "<ul ONKEYUP='this.style.color='green'' ONKEYDOWN='this.style.color='black''>" + f_str + "</ul>"
//      alert(f_str1);

          document.getElementById("intellisense_spanHint").innerHTML = f_str1;
          document.getElementById("intellisense_div1").style.border="solid 1px grey";
       // document.getElementById("div1").className="div11";

    current_row=1;
}

</script>
</head>

<body>
<table width="80%"   border="0" cellspacing="0" cellpadding="0">

<tr>
<td width="5%" style="margin:0;padding:5; height: 27px;">
<div align="left"><strong class="fnt3">Search:</strong></div>
</td>
<td width="2%">  </td>
<td width="24%" style="height: 27px"><div align="left"><select   onchange="txtmouseout()" id="selsearchin_id" name="selsearchin" class="fntboldsearch"><option value="1" selected>Products</option><option value="2">Suppliers Name</option><option value="3">Trade Shows</option></select>
</div></td>
<td width="2%"> </td>
<td width="61%" valign="bottom" style="height: 27px;padding-bottom:2px">
<div style="position:relative; z-index:100">
<input type="text" AutoCompleteType="Disabled" onkeypress="capturekey(event)" autocomplete="off" class="fnt3" id="txt1" onmouseover="txtmouseover()" onmouseout="txtmouseout1()" onkeyup="showHint(this.value)"   size="51" />
</div>
</td>
<td width="2%"> </td>
<td width="7%" style="margin:0; height:27px;padding-top:3px" valign="center"><div align=""><INPUT TYPE="image" SRC="http://www.jimtrade.com/images_new/index_button.jpg" BORDER="0" > </div></td>
</tr>
<tr >
<td width="33%"></td>
<td width="61%" valign="top"><div style="position:absolute;z-index:5;padding-left:130px">
<div id="intellisense_div1"; style="width:395px;background-color:white; " >
<span id="intellisense_spanHint" ></span>
</div></div>
</td>
</tr>
</table>
</body>
</html>

Query used in webservice is :

select top 10 productname from products where productname like '" & prefixText & "%'

Answers (7)

Div problem in javascript

Consume the Web Service Asynchronously from html javascript