Untitled

<html>
<title>Auto completar</title>
<head>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.ui.core.min.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.position.min.js"></script>
<script src="js/jquery.ui.autocomplete.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css"/>
</head>
<body>
<script>

$(function() {

	$( "#input_estados" ).autocomplete(
	{
		source:'estados.php',
		select: function( event, ui ) {
			$( "#input_estados" ).val( ui.item.estado + " / " + ui.item.uf );
			$( "#hidden_uf" ).val( ui.item.id );
			return false;
		}
	}).data( "autocomplete" )._renderItem = function( ul, item ) {
		return $( "<li></li>" )
			.data( "item.autocomplete", item )
			.append( "<a><strong>" + item.estado + "</strong> / " + item.uf + "</a>" )
			.appendTo( ul );

		};

	$( "#input_municipios" ).autocomplete(
	{
		source:'municipios.php?uf='+$( "#hidden_uf" ).val(),
		select: function( event, ui ) {
			$( "#input_municipios" ).val(ui.item.municipio);
			return false;
		}
	}).data( "autocomplete" )._renderItem = function( ul, item ) {
		return $( "<li></li>" )
			.data( "item.autocomplete", item )
			.append( "<a><strong>" + item.municipio + "</strong></a>" )
			.appendTo( ul );
		};

});

</script>
<form method="get" value"#">
Estado: <input type="text"  id="input_estados" /> <br>
Cidade: <input type="text"  id="input_municipios" />  <br>
<input type="text" id="hidden_uf"><br>
<button onclick="faz()">teste</button><script>function faz() { alert($("#hidden_uf").val()); } </script>
</form>
</body>
</html>