hi guys,
just want to ask some question.
i have two textboxes txt1 and txt2. these two possess jquery autocompletes within..
now, what i want to do is that this two are interconnected. Meaning, the values in autocomplete in txt2 will depend upon the values inputted in txt1.

consider this data:
middle name last name
dela cruz alfonso
antonio marquez

if i input dela cruz in txt1, the values in autocomplete in txt2 should only be alfonso and not marquez..

i already have my code in here, the autocomplete code is already finished for the both txtboxes, the problem is that the interconnection between them..
i also used ajax here, i can get the value if i output it in the same page where the two textboxes lie, but when i get it using the autocomplete php, it does not appear..could you please help..

*******this is my index.php

<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">
$().ready(function() {
	$("#middleName").autocomplete("php/middlename.php", 
	{
		width: 100,
		matchContains: true,
		selectFirst: false
	});
	$("#lastname").autocomplete("php/lastname.php", 
	{
		width: 300,
		matchContains: true,
		selectFirst: false
	});
});

function getLastName(str)
{	
	if (str=="")
	{
		document.getElementById("txtBuffer").innerHTML="";
		return;
	} 
	
	// code for IE7+, Firefox, Chrome, Opera, Safari
	if (window.XMLHttpRequest)
	{
		xmlhttp=new XMLHttpRequest();
	}
	// code for IE6, IE5
	else
	{
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("txtBuffer").innerHTML=xmlhttp.responseText;
		}
	}
	
	xmlhttp.open("GET","php/ajax.php?empMName="+str,true);
	xmlhttp.send();
}
</script>


<div id="content">
	<form autocomplete="off">
		<p>
			Middle Name
			  <input type="text" name="middleName" id="middleName" onChange="getLastName(this.value)"/>
          
Last Name
<input type="text" name="lastname" id="lastname" />
		</p>
	</form>
</div>

******this is the middlename.php

require_once "config.php";

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = mysql_query("SELECT DISTINCT empMName as empMName FROM employee_info WHERE empMName LIKE '%" . $q . "%'");

while($row = mysql_fetch_array($sql)) 
{
	$cname = $row['empMName'];
	echo "$cname\n";
}

*******this is the ajax.php

<?php

$empMName = strtolower($_GET["empMName"]);
echo "$empMName\n";

?>

sir thanks, the second link is not working properly..js error..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.