[Resolvido] Problema com JQuery Autocomplete

Boa tarde pessoal..

Eu estou implementando o autocomplete com jquery no meu sistema e ele busca os resultados tranquilo.. o que acontece é que aparece uns caracteres muito estranhos.. no banco de dados está tudo perfeito e quando eu trago via autocomplete aparecem estes caracteres...(s{, r~, r).

Eu não sei o que fazer.. Outra coisa que acontece é que quando eu seleciono qualquer um dos exibidos, não salva o valor no banco de dados. vou postar os cósigos para vcs verem.

complete.js

$().ready(function() {
	$("#uf").autocomplete("estados.php", {
 width: 260,
 selectFirst: false
	});

	$("#uf").result(function(event, data, formatted) {
 if (data)
 $(this).parent().next().find("value").val(data[1]);
	});
});

estados.php

<?php
include_once('../inc/config.php');
include_once('../inc/funcoes.php');

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

$sql = "SELECT * FROM estados WHERE est_sigla LIKE '$q%' ORDER BY est_sigla ASC";
$res = mysql_query($sql);
$num = mysql_num_rows($res);

if ($num > 0){
	while($linha = mysql_fetch_array($res, MYSQL_ASSOC)){
 echo ($linha['idestados'] | $linha['est_sigla']);
 echo "\n";
	}
}

?>

E a página com o formulário (estou usando smarty)

<form name="pessoa" id="pessoa" action="../php/pessoa.php" method="post" autocomplete="off">
 <div id="DivNome">
 Estado :
 </div>
 <div id="DivCampo">
 <input type="text" name="uf" id="uf" value="{$dados.pes_uf}" class="campo width30" />
 </div>
</form>

Espero que alguém possa me ajudar...