Page 1 of 1

jquery for auto complete dropdown in php

Posted: Mon Jul 18, 2011 4:53 am
by 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

Code: Select all

<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
[ICODE]
<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>
[/ICODE]

This is the code of the rpc.php page that process the query

Code: Select all

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

Re: jquery for auto complete dropdown in php

Posted: Mon Jul 18, 2011 9:02 am
by phazorRise
You can't use up and down arrow keys to populate the list as it is in <div>. It can be populated implicitly if you are using drop down list like <select>.
If you want to populate the list in <div> you have to use keyup/keydown events in jQuery. Check for keyup or keydown events and grab the keycodes when key is pressed.
Following code will let you know the keycode.

Code: Select all

$(function(){ 
	$('#inputField').keyup(function (e) {
		alert(e.keyCode); 
	});
 });
Take one input field for this purpose.
You can go on further with something like -

Code: Select all

$(function(){ 
	$('#inputField').keyup(function (e) {
            //38 is keycode for Up arrow.
		if(e.keyCode==38){
                           //do something
                }
            //40 is keycode for Down arrow.
                if(e.keyCode==40){
                         //do something
                }
	});
 });