jquery for auto complete dropdown in php

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
ishakya
Forum Commoner
Posts: 40
Joined: Tue Jan 04, 2011 4:58 am

jquery for auto complete dropdown in php

Post 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..
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Re: jquery for auto complete dropdown in php

Post 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
                }
	});
 });
Post Reply