Autocomplete based on the other variable data

JavaScript
1

Hi,

I have simple code that I used autocomplete for process and supervisor fields, now in my supervisor field my autocomplete is based only on what I type in that field to display if it has match on the database. Now I want to happen is the supervisor that i type will be based on the process that I choose first, if the supervisor that I type has a process like I choose before is equal/match it will display on the autocomplete suggested.
I have no idea if it is possible and how, because i am new in using jquery.

here is my code:


<?php
  session_start();
  ob_start();
  date_default_timezone_set("Asia/Singapore");
  error_reporting(0);  
  include('connection.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Operator's Shift Report </title>
<head>
<link rel="stylesheet" type="text/css" href="op_report.css" />
<link rel="stylesheet" type="text/css" href="calendar.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<script type="text/javascript">
//----auto complete process name---//
$().ready(function() {
    $("#process_name").autocomplete("get_process_list.php", {
       width: 205,
        matchContains: true,
        mustMatch: true,
        selectFirst: false
    });
    
    $("#process_name").result(function(event, data, formatted) {
        $("#process_id").val(data[1]);
    });
    
});


//------auto complete supervisor---//
$().ready(function() {
    $("#supervisor").autocomplete("get_spv_name.php", {
       width: 205,
        matchContains: true,
        mustMatch: true,
        selectFirst: false
    });
    
     $("#supervisor").result(function(event, data, formatted) {
        $("#spv_id").val(data[1]);
    });
});
</script>
</head>
<body onload=document.getElementById("process_name").focus();>
<form>

<div id="operators_report">
<fieldset>
<legend><h1>Operator's Shift Report</h1></legend>
<table>
<tr>
<td>Process:</td>
<td><input type="text" name="process_name" id="process_name" value="" size="30"></td>
<td>Supervisor:</td>
<td><input type="text" name="supervisor" id="supervisor" value="" size="30"></td>
</tr>

</table>

</fieldset>
</div>
<input type="hidden" name="process_id" id="process_id" value="" />
<input type="hidden" name="spv_id" id="spv_id" value="" />

</form>
</body>
</html>

and here is my get_spv_name.php


<?php
include "connection.php";
$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "SELECT o.employee_id, CONCAT(o.lastname, ', ', o.firstname, ' ', o.middlename) AS supervisor, p.process_name 
FROM supervisors AS o JOIN process_list AS p ON (o.process_id = p.process_id) where CONCAT(o.lastname, ', ', o.firstname, ' ', o.middlename) LIKE '$q%'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
	$emp_id = $rs['employee_id'];
    $supervisor = $rs['supervisor'];
    $pname = $rs['process_name'];
    echo "$supervisor|$emp_id|$pname\
";
}
?>

Any help is highly appreciated.

Thank you.