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 & "%'