jquery for auto complete dropdown in php

[ishakya]

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

<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

<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

<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
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..