Hola, bueno sólo quería agradecer a este post por haber solucionado mi problema ya que estaba buscando un plugin para autocompletar durante 1 semana que tenga la funcionalidad con json que ya lo supe acomodar, la cosa es que tuve muchas amanecidas, muchos cigarros fumados y mucho café, pero ya :D por fin todo eso se acabó jaja :(.
Para obrar en bien de la humanidad y que otra persona no pase por lo mismo que he pasado, pongo el codigo acomodado con json y todo lo demás.
Mi problema era que no sabía como acomodar del lado de servidor para recibir la respuesta de la variable "q" pero en formato json que ya más abajo se van a dar cuenta de la diferencia, este post me sirvió para elaborar la consulta, lo demás ya lo tenia hecho.
Código de lado servidor: archivo emails.php
Código PHP:
<?
$servidor = "elnombredetuservidor";
$usuariodb = "elnombredetusuariodebd";
$passworddb = "laclavedetuusuariodedb";
$db = "elnombredeladb";
$puerto = "elpuertodeladb";
$mysqli = new MySQLI($servidor,$usuariodb,$passworddb,$db,$puerto);
$mysqli->query("SET NAMES 'utf8'");
$q =$_GET["q"];
$resultado_user = $mysqli->query("select nombredecliente, correodecliente from tabla where nombredecliente like '%$q%'");
$array = array();
while($filas = $resultado_user->fetch_object())
{
$arr[] = $filas;
}
echo json_encode($arr);
?>
Código de lado cliente y HTML: archivo json.html
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../lib/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">
$(function() {
function format(mail) {
return mail.nombredecliente + " <" + mail.correodecliente + ">";
}
$("#email").autocomplete('emails.php', {
multiple: true,
dataType: "json",
parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.nombredecliente,
result: row.nombredecliente + " <" + row.correodecliente + ">"
}
});
},
formatItem: function(item) {
return format(item);
}
}).result(function(e, item) {
$("#content").append("<p>selected " + format(item) + "</p>");
});
});
</script>
</head>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
<div id="content">
<form autocomplete="off">
<p>
<label>E-Mail (remote json):</label>
<textarea cols="120" id="email"></textarea>
</p>
<input type="submit" value="Submit" />
</form>
<a href="emails.phps">Server-side script creating the JSON data</a>
</div>
</body>
</html>
Esto ocasionará que puedas agregar a varias personas que ya estuvieron registradas en una base de datos o incluso podrías experimentar y llamar la id del cliente y guardarlo en un campo hidden para ejecutar transacciones orientadas a una base de datos normalizada.
El plugin es de la página
bassistance donde salen muchos
ejemplos que se pueden ver al detalle revisando su código fuente.
Pero lo anterior es genérico porque después salió la versión para json que se encuentra en
esta página media rebuscada es, porque parece no tener una página principal a menos que esté equivocado, simplemente descargan ese paquete de archivos y dentro de la carpeta DEMO se encuentra el ejemplo con JSON y bien documentado todo.
Muchos saludos