Hello, I have search box that has auto complete from database(works fine). But I need when the search box value auto-populates in textbox(address_name), the other textbox values come from mysql and automatically populate the other textboxes related to the textbox(address_name) i.e textbox(work_no) and textbox(work_address) using a button or onChange event handler. I know I should use Ajax+php to do this but I tried and failed?. Please help me to solve this problem as soon as possible. Below are the two scripts.
Thanks in Advance
analysis.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Auto Suggest</title>
<script type="text/javascript" src="autocomplete/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 bgcolor="teal" align="center" >
<h1 align="center" >
Analysis
</h1>
<br>
<label>Search by work Address</label> <input type="text" name="address_name" size="20"
id="inputString" onkeyup="lookup(this.value);" onblur="fill();" >
<form name ="analysis" method="POST" action="update.php">
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="autocomplete/upArrow.png" style="position:
relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
<p>
<label>Work Number </label> <input type="text" name="work_no" id="work_no" size="20"/>
<label> Work Address </label><input type="text" name="work_address" id="work_address" size="20"/ ></br>
<br>
<input type="button" name= "new" value="New" onclick="window.location.href='new.html'" />
<input type="submit" name= "update" value= "Edit"
onclick="window.location.href='update.html'" />
<input type="reset" name= "delet" value= "Delete" />
<input type="button" name= "main" value= "Home" onclick="window.location.href='main.html'"
/>
<body>
</form>
</html>
rpc.php
<?php
$db = new mysqli('localhost', 'root' ,'mysql', 'consultancy');
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
// Is there a posted query string?
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
// Is the string length greater than 0?
if(strlen($queryString) >0) {
$query = $db->query("SELECT work_address FROM analysis WHERE work_address LIKE '$queryString%' LIMIT 10");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<li onClick="fill(\''.$result->work_address.'\');">'.$result->work_address.'</li>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
} // There is a queryString.
} else {
echo 'There should be no direct access to this script!';
}
}
?>
