Caracteres HTML y Jquery UI Autocomplete

[daweb]

Hola a todos,

Despues de haber buscado y leído una cantidad inmensa de foros no logro solucionar mi problema. Resulta que he implementado jquery ui autocomplete para cargar una lista atacando a una bd en mysql. La llamada funciona de forma correcta pero a la hora de mostrar el listado, los acentos aparecen codificados en hmtl(acción) y no se decodifican.

Os explíco mi codigo y las distintas pruebas que he hecho:
Carga de jquery ui autocomplete para un input:
Opción a:

Código:

$('#class_search').autocomplete({
	minLength: 2,
    source: function( request, response ) {
        $.getJSON( "class_list.php", {
            term: request.term
        }, response );
    },
    select : function(event, ui) {			
    	window.open("therapeutics.php?id="+ui.item.id,'_self',false);
   }
});

Opción b:

Código:

$('#class_search'').autocomplete({
	source : "class_list.php",
	html: true,
	select : function(event, ui) {					
		window.open("lab.php?id="+ui.item.id,'_self',false);
	}
});

Ambas opciones funcionan de forma correcta.

Ahora viene la creación del array que recibe jQuery para generar la lista

Código:

	/* Conexión a la db * /
	$search = $_GET["term"];
	$datos = array();
	$brand_qry = "SELECT * FROM clases 
				  WHERE clase LIKE '%$search%' ";

	$resultado_brand_qry = mysql_query($brand_qry);								

	while ($row = mysql_fetch_array($resultado_brand_qry, MYSQL_ASSOC)){		
		$datos[] = array("id" => $row["id"], "value" => $row["clase"]);
	}
	print json_encode($datos);

Ahora en este archivo he probado:
-> Poner una cabecera para especificar el tipo de archivo

Código:

header("Content-Type: application/json");

-> Codificar la columna que se enseñara en el listado:

Código:

$row["id"], "value" => utf8_encode($row["clase"])

De ninguna manera consigo obtener la decodificación de los valores de la bd en el listado...

Os agradezco de antemano vuestra respuesta.

[mandingaweb]

Hola daweb: llegue a tu post buscando solución para exactamente el mismo problema. En mi caso estoy trabajando toda la cadena (base de datos, encoding de los html, etc) en UTF8, pero al desplegar el autocomplete en el formulario aparece el nefasto ñ y sus secuaces.

Probé con la solución que proponen en el sitio de JQuery UI ([URL="http://jqueryui.com/demos/autocomplete/#folding"]http://jqueryui.com/demos/autocomplete/#folding[/URL]) y no me funciona con el script PHP que genera los datos remotos.

Si pruebo mi PHP de búsqueda veo que genera los datos correctamente (con acentos, eñes, etc), asi que creo que el problema está en la codificación JSON que hago al final, de todos modos aún no pude dar con la solución.

Has podido hallar una solución? Si yo la encuentro te la comparto.
Saludos!

[djaevi]

han probado escribir los acentos normalmente en sus textos y aplicarles luego la funcion utf8_encode?, yo no uso jquery para traer datos de ajax pero supongo que sera similar, en mi base de datos tengo los textos subidos con acentos lo que hago es aplicarle la funcion que digo utf8_encode($registro); y recibo los datos lo mas bien, es una sugerencia que pueden probar je

Saludos

[mandingaweb]

Gracias djaevi, ya probé la función UTF8_encode (y también decode, por las dudas), pero no funcionó.

[mandingaweb]

Encontré una solución entre los comentarios del manual de PHP para la función json_encode. El código ha quedado asi, en mi caso (copio solamente el código del script PHP donde hago la consulta a la BD y genero la respuesta JSON para el autocomplete):

Código PHP:

  $resultados = array();
 
//la consulta a la BD
$sql = "SELECT nombre
    FROM def_calles
    WHERE nombre LIKE '%" . $_GET[term] . "%'";
 
$qry = mysql_query($sql);
 
while($res = mysql_fetch_object($qry)){
    $nom = $res->nombre;
 
    $resultados[] = array(  
           'label' => $nom,  
        'value' => $nom
    );
}
 
//acá está lo que encontré en el foro de PHP
$resultados = json_encode($resultados);
$resultados = str_replace("\/","/",$resultados);
$resultados = str_replace('"','\\"',$resultados);
$resultados = json_decode('"'.$resultados.'"');
print_r($resultados);//salen perfectas las opciones del autocomplete en el formulario, con eñes y acentos! 
   

Todo el crédito corresponde a julien dot dev at gmail dot com que publicó esto en el manual de PHP, en [URL="http://php.net/manual/es/function.json-encode.php"]http://php.net/manual/es/function.json-encode.php[/URL].

[daweb]

Buenos días mandingaweb,

En primer lugar te agradezco tu respuesta, pero aún así sigue sin funcionar... mira esto es lo que he hecho:

Llamada al php que carga el listado en función al parámetro de búsqueda

Código:

$('#class_search').autocomplete({
	source : "class_list.php",
	minLength: 2,
	dataType: "json",
	select : function(event, ui) {					
		window.open("therapeutics.php?id="+ui.item.id,'_self',false);
	}				
});

Fichero que interactua con la base de datos, lo he modificado siguiendo tu ejemplo:

Código:

        // Conexión a la base de datos: 

	// He probado meterle este header pero tampoco...
        header( 'Content-type: text/html; charset=UTF-8' );	
	$resultados = array(); 

	//Consulta al la db
	$sql = "SELECT id, clase FROM clases 
			WHERE clase LIKE  '%" . $_GET[term] . "%' "; 

	$qry = mysql_query($sql); 

	while($res = mysql_fetch_object($qry)){ 
	    $nom   = $res->id; 
	    $clase = $res->clase;
	    $resultados[] = array(   
	    	"id"	     => $nom, 
		"value" => $clase
	    ); 
	}	
	$resultados = json_encode($resultados); 
	$resultados = str_replace("\/","/",$resultados); 
	$resultados = str_replace('"','\\"',$resultados); 
	$resultados = json_decode('"'.$resultados.'"'); 
	print_r($resultados);

Si quieres verlo en funcionamiento esta es la url que va haciendo la consulta a la bd:
[URL="http://cfg.com.do/class_list.php?term=der"]http://cfg.com.do/class_list.php?term=der[/URL]
y esta es la url que muestra el listado:
[URL="http://cfg.com.do/productos.php"]http://cfg.com.do/productos.php[/URL] -> si quieres probarlo hazlo en la caja que pone "Clase terapéutica"

Si has llegado hasta aquí te agradezco mucho tu respuesta.

[mandingaweb]

Hola daweb!
Lamento que no te haya funcionado, a mi me anduvo perfecto. Te pregunto: que collation usás en la BD? yo tengo todo en UTF8-spanish. En el script PHP no le agregué ningún encabezado, te copio el código completo:

buscaCalle.php

Código PHP:

  <?
require("../../php-includes/sistema/dbconnect.inc.php");
$resultados = array();
$sql = "SELECT DISTINCT nombre
        FROM def_calles
        WHERE nombre LIKE '%" . $_GET[term] . "%'";
$qry = mysql_query($sql);
while($res = mysql_fetch_object($qry)){
    $nom = $res->nombre;
    $resultados[] = array(  
           'label' => $nom,  
        'value' => $nom
    );
}
$resultados = json_encode($resultados);
$resultados = str_replace("\/","/",$resultados);
$resultados = str_replace('"','\\"',$resultados);
$resultados = json_decode('"'.$resultados.'"');
print_r($resultados);
?>   

y la llamada al autocomplete:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- mas cosas no relevantes por aqui -->

<script language="javascript">
$(document).ready(function(e) {
	$("#dir_calle").autocomplete({
		source: '../PHP-includes/datos/buscaCalle.php',
		minLength: 2
	});
/* y sigue con otros autocomplete */

No se me ocurre que más puede estar distinto. Espero que algo de esto te sea de ayuda.
Saludos!

[daweb]

Hola mandingaweb,

Mi bd la tengo en utf8_general_ci... voy a probar el cambio y quitar el header que le puse a ver...

Muchas gracias!