I have done autocomplete for my php code usign ajax.I used this code for autocompleting one fileld.Can I use the same code for autocompleting more than one field…
Code contains ajax code is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete.....</title>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString)
{
if(inputString.length == 0)
{
// Hide the suggestion box.
$('#suggestions').hide();
}
else
{
$.post("rpc.php", {queryString: ""+inputString+""}, function(data)
{
if(data.length >0)
{
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue)
{
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
</script>
<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>
</head>
<body>
<div>
<form>
<div>
Type your county:
<br />
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" 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>
</body>
</html>
Code for database connection page is
<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("name",$con);
if(!$con)
{
echo 'ERROR: Could not connect to the database.';
}
else
{
if(isset($_POST['queryString']))
{
$queryString = mysql_real_escape_string($_POST['queryString']);
if(strlen($queryString) >0)
{
$query = mysql_query("SELECT cname FROM country WHERE cname LIKE '$queryString%' LIMIT 10");
if($query)
{
while($result= mysql_fetch_object($query))
{
echo '<li onClick="fill(\''.$result->cname.'\');">'.$result->cname.'</li>';
}
}
else
{
echo 'ERROR: There was a problem with the query.';
}
}
else
{
// Dont do anything.
}
}
else
{
echo 'There should be no direct access to this script!';
}
}
?>
Yes, you can use the code to autocomplete more than one field.
The quick and dirty way:
HTML:
Javascript:
The jQuery and more efficient way (based on your jQuery version 1.2.1:
HTML:
Javascript (using jQuery 1.2.1):
Further optimizations:
AJAXing a URL as you keypress is unnecessary. If you don’t mind an extra second to auto-fill; it would be better to submit PHP forms onblur instead. Additionally, you can also take advantage of JSON and essentially get all the data you need in one single AJAX call which as a end result makes the form’s footprint have 1 AJAX call and 1 MySQL database query. Otherwise, your simply pounding the server on each keyup event that is fired.
— OR —
Alternatively you can setup a delay that waits 2-3 seconds before submitting the PHP form. It would then also need to ensure that the setTimeout is cleared upon additional keypresses so as to prevent unnecessary pileup of delayed AJAX calls.