jquery plugin autocomplete - envio de parámetros

Legolas_Bilbao · #1 (**permalink**) 18/12/2009, 03:58

Estoy mirando este plugin y su ejemplo porque lo voy a utilizar en mi web pero no encuentro donde o como pasa el parametro del texto.

Codigo js

Código HTML:

$().ready(function() {
	$("#course").autocomplete("get_course_list.php", {
		width: 260,
		matchContains: true,
		//mustMatch: true,
		//minChars: 0,
		//multiple: true,
		//highlight: false,
		//multipleSeparator: ",",
		selectFirst: false
	});
});

codigo html

Código PHP:

  <form autocomplete="off"> 
        <p> 
            Course Name <label>:</label> 
            <input type="text" name="course" id="course" /> 
            <input type="button" value="Get Value" /> 
        </p> 
        <input type="submit" value="Submit" /> 
    </form>

codigo en el servidor

Código PHP:

  $q = strtolower($_GET["q"]); 
if (!$q) return; 
 
$sql = "select DISTINCT course_name as course_name from course where course_name LIKE '%$q%'"; 
$rsd = mysql_query($sql); 
while($rs = mysql_fetch_array($rsd)) { 
    $cname = $rs['course_name']; 
    echo "$cname\n"; 
} 
?>

No veo donde como se manda el parámetro q.

¿cómo puedo añadir mas parámetros?

un saludo y muchas dudas

mayid · #2 (**permalink**) 18/12/2009, 08:30

Cita:

.autocomplete("get_course_list.php"

Ahi esta la magia.

.autocomplete hace una llamada ajax para "get_course_list.php" cada vez que se pulsa una tecla.

Si necesitas ver el script, fijate en el archivo .js correspondiente. Lo que vos publicastes es solo un disparador del script.

Legolas_Bilbao · #3 (**permalink**) 21/12/2009, 05:54

Ok, no me había planteado modificar la función autocomplete.

gracias por la info

MarioAraque · #4 (**permalink**) 21/12/2009, 06:09

Yo tenia un autocomplete en jquery que tambien, aparte del parametro q, tenia otro parametro LIMIT, que te permitia acotar los resultados de busqueda, todo forma parte del script que ellos hicieron.

Saludos.

mayid · #5 (**permalink**) 21/12/2009, 09:20

Si, Carlos. Aqui tambien esta la opcion:

Cita:

$().ready(function() {
$("#course").autocomplete("get_course_list.php", {
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
});
});

Pero esa funciona del lado cliente. A mi entender, lo unico que se envia es la letra, o la silaba a buscar.

Si queres pasar una GET, esto iria bien:

Cita:

get_course_list.php?extra=valor

GabrielAngelos · #6 (**permalink**) 13/01/2010, 03:58

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 + " &lt;" + mail.correodecliente + "&gt";
	}
	$("#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