I found a code for auto complete option which used jquery.But the suggestionlist cant access using arrow keys.can someone please give suggestion to use arrow keys to select required suggestion without using mouse.

This is the html code for form
HTML Code:
<div>
		<form>
			<div>
				Type your county:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value,'12AB');" onblur="fill();" />
			</div>
			
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
			</div>
		</form>
	</div>
This is the javascript function used to popup auto complete option

Code:
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookup(inputString,com_id) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+inputString+"|"+com_id+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>

This is the code for css of suggestion box and list
Code:
<style type="text/css">
	body {
		font-family: Helvetica;
		font-size: 11px;
		color: #000;
	}
	
	h3 {
		margin: 0px;
		padding: 0px;	
	}

	.suggestionsBox {
		position: relative;
		left: 30px;
		margin: 10px 0px 0px 0px;
		width: 200px;
		background-color: #212427;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border: 2px solid #000;	
		color: #fff;
	}
	
	.suggestionList {
		margin: 0px;
		padding: 0px;
	}
	
	.suggestionList li {
		
		margin: 0px 0px 3px 0px;
		padding: 3px;
		cursor: pointer;
	}
	
	.suggestionList li:hover {
		background-color: #659CD8;
	}
</style>
This is the code of the rpc.php page that process the query

PHP Code:
<?php
mysql_connect
('localhost','root''123');
mysql_select_db('my_db') or die(mysql_error());
    

$queryString $_POST['queryString'];
$queryString mysql_real_escape_string($queryString);
        
            if(
strlen($queryString) >0) {
                
                
$query =("SELECT distinct cus_name FROM tbl_cus_company WHERE cus_name LIKE '%$queryString%' LIMIT 10");
                
$result mysql_query($query) or die(mysql_error());
                
$affectedRows=mysql_affected_rows();
                if (
$affectedRows==0){
    
                    echo 
'<center>There is no Record </center>';
                    }
                    else{
                while(
$row1 mysql_fetch_array($result))
                      {
                    
                         echo 
'<li onClick="fill(\''.$row1[0].'\');">'.$row1[0].'</li>';
                     }
                } 
        
                
            }
            
?>
Hope someone will help me to solve this issue.
Thanks in advance..