jquery for auto complete dropdown in php
Posted: Mon Jul 18, 2011 4:53 am
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
This is the javascript function used to popup auto complete option
[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
Hope someone will help me to solve this issue.
Thanks in advance..
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">
</div>
</div>
</form>
</div>
This is the code for css of suggestion box and list<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>
[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>';
}
}
}
?>Thanks in advance..