i have one auto suggest text box.my problem with this is that when the suggestions are

listed out and when i tried to navigate it through the arrow keys, the selection of the

item disappears very soon as and when they are selected. also i cannot navigate through all the items listed. anyone please help me

Recommended Answers

All 5 Replies

Please post your code

thank you all for you supports. i post my complete code here.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="../css/default.css"/>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style>
		* {
  margin: 0;
  padding: 0
}

.container {
  background-color: #BBF;
  width: 1000px;
  border: 1px solid #000;
}



.header {
  width: 1000px;
  border-bottom: 1px solid #000;
}

.header ul {
  list-style: none
}
.header ul li {
/*  width: 150px;
*/  border-left: 1px solid #000;
  float: left;
  font-weight: bold;
  padding-left: 2px;
}
.data {
  /*width: 150px;*/
  float: left;
  padding-left: 2px;
}
.rowodd,.roweven {
  position: relative;
  width: 1000px;
  border-top: 1px solid #000;
  background-color: #E8E8E8;
}
.roweven {
  background-color: #D1DCE9;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
            .autosuggest
            {
                
            }
            .rate
            {
                color:red ;
            }
            .autosuggest li
            {
                list-style-type: none;
				
            }
            .myul
            {
				position:absolute;
                background:#E2FEEF;
                cursor: pointer;
                margin-top: 0px;
				margin-left:0px;
				margin-right:auto;
				overflow-y: scroll;
				height:200px;
				width:350px;
				overflow-x:hidden;
            }
            .autosuggest li:hover
            {
                background:#CCC;
				font-family:Tahoma, Geneva, sans-serif;
				font-size:14px;
				
            }
            .text
            {
                width: 100px;
                height: 30px;
                float:left ;
				
            }
        </style>
        		<script type="text/javascript">

document.onkeyup = KeyCheck;       


function KeyCheck(e)

{

   var KeyID = (window.event) ? event.keyCode : e.keyCode;
   
   if( (KeyID >=48 && KeyID <=57) || (KeyID >=65 && KeyID <=90) || (KeyID ==8 ) ||( KeyID ==32) ||( KeyID ==222)||( KeyID ==46) || (KeyID >=186 && KeyID <=191) ){
	   
	current_ptr=-1;
   
   }

   switch(KeyID)

   {	
   	  case 9:
	  if(document.getElementById('myul').style.display=='block'){
	  var x=document.getElementById(current_ptr).innerHTML;
	  //alert(x);
	  
	  
	  x=String(x);

	var start=x.indexOf('!?')+2;
	  
	  var end= x.lastIndexOf('!?');
	  
	  var str=x.substring(start,end);
	  
	  
	  start=str.indexOf('/?');
	  
	  var name=str.substr(0,start);
	  
	  str=str.substr(start+2);
	  
	  start=str.indexOf('/?');
	  
	  var id=str.substr(0,start);
	  
	  str=str.substr(start+2);
	  
	  start=str.indexOf('/?');
	  
	  var rate=str.substr(0,start);
	  
	  str=str.substr(start+2);
	  
	  start=str.indexOf('/?');
	  
	  var munit=str.substr(0,start);
	  
	  document.getElementById('myul').style.display='none';
	  suggest(current_ptr,name,id,rate,munit);
	  }else{
		  if(document.getElementById('txt' + global_index + 'x3').disabled == false ){
			  alert("text box enabled");
		  }
	  }
	  break;
	  
	  case 27:
	  
	  document.getElementById('myul').style.display='none';
	  
	  break;
      
	  
	  case 38:

      moveup();

      break;

      

      case 40:

     movedown();

      break;
	  
	  
	  
   }

}

	var current_ptr=-1;
function movedown(){
	var count_of_li=document.getElementsByTagName('li');
	if(document.getElementById('myul').style.display=='block'){
		
		var no_of_items=count_of_li.length-11;
		
		current_ptr=current_ptr+1;
		//alert(current_ptr);\
		
		if(current_ptr!=no_of_items){

		document.getElementById(current_ptr).style.background="#CCC";
		
		document.getElementById(current_ptr).style.color="Green";
				
		document.getElementById(current_ptr).style.fontFamily="Tahoma, Geneva, sans-serif";
		
		
		
		setTimeout(function () { document.getElementById(current_ptr).focus();document.getElementById(current_ptr).style.backgroundColor='CCC';}, 100);
				
		
		
		document.getElementById(current_ptr).style.fontSize="14px";
		
		

	}else{
		current_ptr=-1;
	}

	}
}
function moveup(){
	
	var count_of_li=document.getElementsByTagName('li');
	if(document.getElementById('myul').style.display=='block'){
		
		var no_of_items=count_of_li.length-11;
		
		
		//alert(current_ptr);\
		current_ptr=current_ptr-1;
		
		if(current_ptr>-1){
		
		
		
		
		document.getElementById(current_ptr).style.background="#CCC";
		
		document.getElementById(current_ptr).style.color="RED";
				
		document.getElementById(current_ptr).style.fontFamily="Tahoma, Geneva, sans-serif";

		setTimeout(function () { document.getElementById(current_ptr).style.backgroundColor='CCC' }, 100);
		
		document.getElementById(current_ptr).style.fontSize="14px";
		
		}else{
			current_ptr=parseInt(no_of_items);
		}

	}
	
	
}
</script>


        <script src="responsexml.js"> </script>
		
        <script type="text/javascript">
		function a(){
				alert("ok");
			}
function round_number(number, dec_places)
{
    var new_number = '';
    var i = 0; //Just used in loops
    var sign = ""; //If negative, a minus sign will be prefixed to the result
    number = number.toString(); //We need to operate on and return a string, not a number
    number = number.replace(/^\s+|\s+$/g, ''); //Remove any excess white space
    if (number.charCodeAt(0) == 45) //minus sign
    {
        sign = '-';
        number = number.substr(1).replace(/^\s+|\s+$/g, '');
    }
    
    dec_places = dec_places * 1; //We need an integer
    dec_point_pos = number.lastIndexOf(".");
    if (dec_point_pos == 0)
    {
        number = "0" + number;
        dec_point_pos = 1;
    }
    if (dec_point_pos == -1 || dec_point_pos == number.length - 1)
    {
        if (dec_places > 0)
        {
            new_number = number + ".";
            for(i=0; i<dec_places; i++)
            {
                new_number += "0";
            }
            if (new_number == 0)
            {
                sign = "";
            }
            return sign + new_number;
        }
        else
        {
            return sign + number;
        }
    }
    var existing_places = (number.length - 1) - dec_point_pos;
    if (existing_places == dec_places)
    {
        return sign + number; //If so, just return the input value
    }
    if (existing_places < dec_places)
    {
        //If so, pad out with zeros
        new_number = number;
        for(i=existing_places; i<dec_places; i++)
        {
            new_number += "0";
        }
        if (new_number == 0)
        {
            sign = "";
        }
        return sign + new_number;
    }
    var end_pos = (dec_point_pos * 1) + dec_places;
    var round_up = false; //Whether or not to round up (add 1 to) the next digit along
    if ((number.charAt(end_pos + 1) * 1) > 4)
    {
        round_up = true;
    }
    var digit_array = new Array();
    for(i=0; i<=end_pos; i++)
    {
        digit_array[i] = number.charAt(i);
    }
    for(i=digit_array.length - 1; i>=0; i--)
    {
        if (digit_array[i] == ".")
        {
            continue;
        }
        if (round_up)
        {
            digit_array[i]++;
            if (digit_array[i] < 10)
            {
                break;
            }
        }
        else
        {
            break;
        }
    }
    for (i=0; i<=end_pos; i++)
    {
        if (digit_array[i] == "." || digit_array[i] < 10 || i == 0)


        {
            new_number += digit_array[i];
        }
        else
        {
            new_number += "0";
        }
    }
    if (dec_places == 0)
    {
        new_number = new_number.replace(".", "");
    }
    if (new_number == 0)
    {
        sign = "";
    }
    return sign + new_number;
}
            var global_index = 1 ;
            var suggest_data = '' ;
            function rate(e, index)
            {
                global_index = index ;

                if( e.keyCode == 13 )
                {
                   var el1= document.getElementById('txt' + global_index + 'x3');
				   setTimeout(function() {el1.focus(); }, 10);
                    return false;
                }
            }
			
            function next(e, index)
            {
                if( e.keyCode == 13 )
                {
					var txtbox=document.getElementById('txt' + index + 'x3');
					if(txtbox.value==""){
						alert("Please Enter The Quantity");
						setTimeout(function() {txtbox.focus(); }, 10);
						return false;
					}
					
                    var newindex = index +1 ;
                    var html = '<div class="rowodd clearfix" id="tr' + newindex  + 'x">' ;
                    html += '<div class="data" style="width:350px;" id="td' + newindex + 'x1">' ;
                    html += '<input type="text" style="width:350px;" id="txt' + newindex + 'x1" class="text" onKeyUp="showUser(this.value)"/>';
                    html += '<div id="container' + newindex + 'x"></div>' ;
                    html += '</div>' ;
                    html += '<div class="data" align="right" id="td' + newindex + 'x2" style="width:150px;">' ;
                    html += '<label class="rate" id="txt'+newindex+'x2" ></label>' ;
                    html += '</div>' ;
                    html += '<div class="data" align="right" id="td' + newindex + 'x3" style="width:100px;">' ;
                    html += '<input id="txt'+newindex+'x3" disabled="disabled" style="width:100px;" type="TEXT" onkeydown="return next(event,'+newindex+');" />' ;
                    html += '</div>' ;
					html += '<div class="data" id="td' + newindex + 'x4" align="center" style="width:75px;">' ;
					html += '<label class="rate" id="txt'+newindex+'x4" ></label>' ;
					html += '</div>' ; 
                    html += '<div class="data" align="right" id="td' + newindex + 'x5" style="width:150px;">' ;
                    html += '<label class="rate" id="txt'+newindex+'x5" ></label>' ;
                    html += '</div>' ;
					html += '<div class="data" id="td' + newindex + 'x6" align="center" style="width:125px;">' ;
					html += '<a href="#" id="tr'+newindex+'x6" onclick="deleterow(this.id);" ><img src="../images/icon_delete.gif" style="border:0;"/></a>' ;
					html += '</div></div>';
                    var e = document.getElementById('prod'+index) ;
                    if( e )
                    {
                        var qty = document.getElementById('txt'+index+'x3').value ;
                        var pinfo = e.value.split('+') ;
                        if( pinfo[0] != undefined )
                        {
                            var post_data = pinfo[0] + "+" + qty ;
                            var epost = document.getElementById('prod_post'+index) ;
							var rowamount=document.getElementById('prod_amount'+index) ;
                            if( epost )
                            {
                                epost.value = post_data;
                            }
                            if( pinfo[1] != undefined )
                            {
                                var te = document.getElementById('txt'+index+'x5') ;
                                var tot = parseInt(qty) * parseFloat(pinfo[1]) ;
								tot=round_number(tot,2);
                                te.innerHTML = tot;
								rowamount.value=tot;
                                var gte = document.getElementById('gte') ;
								val1=parseFloat(gte.value) + parseFloat(tot);
                                gte.value = round_number(val1,2);
								gte.disabled=true;
                            }
                        }
                    }
                    document.getElementById('td' + global_index + 'x3').innerHTML = document.getElementById('txt' + index + 'x3').value ;
                    document.getElementById('idtable' ).innerHTML += html;
                    document.getElementById('container' + (newindex) + 'x').innerHTML = suggest_data ;
                var el2=document.getElementById('txt' + (newindex) + 'x1') ;
				setTimeout(function() {el2.focus(); }, 10);
                    global_index = newindex ;
                    return false;
                }
            }
            function suggest(id, prod_name, prod_id, prod_rate,prod_unit)
			{
				var prod_rate=String(prod_rate);
				if(prod_rate.indexOf('.',0)==-1){
					prod_rate=prod_rate+".00";
				}else{
					var	position=prod_rate.indexOf('.',0);
					var after_decimal=prod_rate.substr(position);
					after_decimal=String(after_decimal);
					if(after_decimal.length<=2){
						prod_rate=prod_rate+"0";
					}
				}
                suggest_data = document.getElementById('container' + (global_index) + 'x').innerHTML;
                var str = '<input id="prod'+global_index+'" type="HIDDEN" value="' + prod_id + '+' + prod_rate + '" />' ;
                str += '<input name="prod[]" id="prod_post'+global_index+'" type="HIDDEN" value="" />' ;
				str +='<input  id="prod_amount'+global_index+'" type="HIDDEN" value="" />' ;
                str += prod_name ;
                document.getElementById('td' + global_index + 'x1').innerHTML = str ;
                document.getElementById('txt' + global_index + 'x2').innerHTML = prod_rate;
                document.getElementById('txt' + global_index + 'x3').disabled = false ;
				document.getElementById('txt' + global_index + 'x4').innerHTML = prod_unit ;
				
                var el3=document.getElementById('txt' + global_index + 'x3');
				setTimeout(function() {el3.focus(); }, 10);
				
            }
			function hideSuggestions(id)
			{
			try
			{
			var myul = getElemId('myul');
			listWrapID.style.visibility = "hidden";	
			}catch(e){}
			}
			function showitems(){
			document.getElementById('myul').style.display= "block" ;	
			}
			function deleterow(id){
				//id to delete row from table
				var id_am_ch=id;
				var id_tr= id;
				var tr_id=id_tr.replace("x6","x");	
				if(confirm("Are You Sure Want To Delete This Entry?")){
				//id for subtracting value form total amount
				var am_id=id_am_ch.replace("x6","");
				am_id_no=am_id.replace("tr","");
			var	amount_text_id="prod_amount" + am_id_no;
				//alert(am_id=am_id.replace("x6",""));
				var amount=document.getElementById(amount_text_id).value;
				var gte = document.getElementById('gte') ;
				val2=parseFloat(gte.value) - parseFloat(amount);
				gte.value =round_number(val2,2);
				gte.disabled=true;
				
				e=document.getElementById(tr_id);
				e.parentNode.removeChild(e);
				}
				//alert(tr_id);
			}
			
			function submitfn(){
				document.frm1.submit();
			}
        </script>
            </head>
    <body>
        <form action="" method="POST" name="frm1" id="frm1">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">


  </table>
  
  <div class="container clearfix" id="idtable"> 
  <div class="header clearfix">
  <ul>
  <li style="width:350px"><center>Item Name</center></li>
  <li style="width:150px"><center>Rate</center></li>
  <li style="width:100px"><center>Quantity</center></li>
  <li style="width:75px"><center>Unit</center></li>
  <li style="width:150px"><center>Amount</center></li>
  <li style="width:125px"><center>Action</center></li>
  	        	   	    	     	   
  </ul>
</div>
  <div class="rowodd clearfix" id="tr1x">
    <div class="data" id="td1x1" style="width:350px;">
      <input type="text" name="txt1x1" id="txt1x1" style="width:350px;"  onKeyUp="showUser(this.value)"/>


                    <div id="container1x">
                        <div class="autosuggest" id="scroll" >
                            <ul id="myul" class="myul" style="display:none;" >                              
                            </ul>
                        </div>
                    </div>
      
      
    </div>
    
    <div class="data"id="td1x2" align="right" style="width:150px;">
                    <label class="rate" id="txt1x2" ></label>
    </div>
    
    <div class="data" id="td1x3" align="right" style="width:100px;">
                    <input id="txt1x3" type="TEXT" style="width:100px;" disabled="disabled" onKeyDown="return next(event,1);" />
    </div>
    
    <div class="data"id="td1x4" align="center" style="width:75px;" >
    			<label class="rate" id="txt1x4" ></label>
    </div>
    
    <div class="data"id="td1x5" align="right" style="width:150px;">
                   <label class="rate" id="txt1x5" ></label>
    </div>
    
    <div class="data" id="td1x6" align="center" style="width:125px;">
                  <a href="#" id="tr1x6" onClick="deleterow(this.id);" ><img src="../images/icon_delete.gif" style="border:0;"/></a>
    </div>
    
  </div>

</div>
        <table cellpadding="0" cellspacing="1" border="0" style="float:right">
        <tr>
        <td colspan="2" align="center">&nbsp;</td>
        </tr>
        <tr>
        <td colspan="2" align="center"><b><u>Terms & Conditions</u></b></td>
        </tr>
            <tr style="height:10px;">
             	<td colspan="2"></td>
            </tr>
        <tr>
        <td colspan="2" align="right" >
           <?php echo $terms; ?> 
        </td>
        </tr>
            <tr style="height:10px;">
             	<td colspan="2"></td>
            </tr>
        
        <tr>
        <td align="right">Total Order Value &nbsp;&nbsp;&nbsp;<img src='../images/inda.jpg' border='0' style='height:12px; width:12px'/></td>
        <td align="left" style="width:240px;">
        <input style="float:right" type="Button"  value="Submit" onClick="submitfn();" />
        <input style="float:right" type="text" disabled="disabled" id="gte" value="0" />
        </td>
        </tr>
        </table>
        
    </form>
    </body>
</html>
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
if(str.length>0){
var e=document.getElementById('myul')
e.style.display='block';	
var url="responsexml.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}else{
var e=document.getElementById('myul')
e.style.display='none';	
	
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("myul").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
<?php
 $q=$_GET["q"];
$i=0;
for($k=0;$k<20;$k++)
{
$name="Item1";
$id=$i;
$rate="100";
$unit="Nos";
 echo "<li id='$i' onClick='suggest($i,\"".$name."\",$id,$rate,\"".$unit."\")'>" .ucwords($name)."<span class='rate'>"."(". $rate. ")</span><input type='hidden' id='$i' value='!?$name/?$id/?$rate/?$unit/?!?'/></li>";
 $i++;
}
?>

this is the order of my page.

note only items like item with rate 100 is exist in the example.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.