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