No puedo sacar el ID de un Ajax Suggest

[lucasarts_18]

Hola:

Estoy utilizando esta librería para hacer ajax suggest y está bastante interesante, el asunto es que hay algo que no sé si se podrá hacer.

Este es el archivo de prueba que he hecho en php, bastante sencillo por así decirlo....

Código PHP:

<?php
/**
 *
 *
 * @version $Id$
 * @copyright 2008
 */
   header("Content-Type: text/xml");
   if ($_GET['input'] == 'a')
      echo '<results>
               <rs id="1" info="">Alejandro</rs>
               <rs id="2" info="">Alberto</rs>
               <rs id="3" info="">Alma</rs>
            </results>';
   else
      echo '<results>
               <rs id="1" info="">Bastian</rs>
               <rs id="2" info="">Bartolomeo</rs>
               <rs id="3" info="">Castillo</rs>
            </results>';
?>

Me gustaría rescatar el valor del id en ves del nombre, es decir que el suggest muestre los nombres pero al momento de pinchar me rescate el valor id, y es que esta librería tiene una opción callbak que no se mucho sobre su proposito, ojalá alguien haya usado esta librería y que pueda resolverme este problema.


Gracias....

Hasta Luego .-

[keyboy]

No conozco esa librería pero viendo por encima los ejemplos, me imagino que el control crea un objeto por cada elemento de la lista de sugerencias, esto es, un objeto por cada

<rs id="2" info="">Alberto</rs>

presente en el xml.

Supongo que dicho objeto tendrá tres propiedades: id, info y valor. Cuando se selecciona un elemento, el control llama a la función callback, (en caso de que hayas asignado una) pasándole el objeto correspondiente como parámetro, y ahí es donde tomas el id:

function callback(obj)
{
  alert('este es el id: ' + obj.id);
}

Tú tienes que definr esta función y pasarla en el objeto options que usas al construir el control.

Los callbacks son similares a los eventos en delphi; tú los defines y el control los llama cuando es necesario.

Bye

[lucasarts_18]

Hola keyboy, gracias por responder.

Estuve haciendo unos ejemplos con la idea que me haz dado, aquí dejo el código

Código PHP:

<form method="get" action="">
   Persona<br />
 
   <input type="text" id="criterio" value="" onblur="callback(options)" /> <br/>
  <script type="text/javascript">
      var options = {
          script:"test1.php?",
          varname:"input",
          callback:"id"
      };
      var as_xml = new AutoSuggest('criterio', options);
 
      function callback(obj){
         alert('este es el id: ' + obj.id);
      }
   </script>
   <input type="submit" value="Enviar" />
</form> 


Lo único que logro rescatar es 'este es el id: id', es decir me toma la opción que estoy definiendo...callback:"id", en ningún caso he podido rescatar el valor id del xml...

Alguna otra sugerencia.

Mil gracias

Hasta Luego .-

[keyboy]

La función callback tienes que especificarla como parte de las opciones. Observa que options es un objeto (construido al vuelo) que pasas al constructor del control:

as_xml = new AutoSuggest('criterio', options);

En options es donde especificas el callback:

function mi_callback(obj)
{
  alert('este es el id: ' + obj.id);
}

options =
{
  script: "test1.php?",
  varname: "input",
  callback: mi_callback;
};

De hecho, puedes asignar directamente la función sin declararla previamente:

options =
{
  script: "test1.php?",
  varname: "input",
  callback: function mi_callback(obj)
  {
    alert('este es el id: ' + obj.id);
  }
};

En la página que enlazaste alprincipio viene el código de los ejemplos, al final del código html.

Bye

[lucasarts_18]

Hola keyboy:

Gracias por la ayuda ahora funciona de maravilla, justo lo que necesitaba.

Acá dejo el código correcto para su funcionamiento por si alguien del foro desea implementar un poquito de ajax....

Código PHP:

<script type="text/javascript">
      var options = {
          script:"test1.php?",
          varname:"input",
     callback: function (obj) { return document.getElementById('criterio').value = obj.id; }
      };
      var as_xml = new AutoSuggest('criterio', options);
 
 
   </script> 


keyboy, disculpa por ser tan catete..., pero me gustaría saber que diablos es obj (no se de donde sale y que representa), por cierto estoy muy verde en esto de JS, pero algo de empeño se le hace.

Mil gracias...

Hasta Luego .-

[keyboy]

Empezado por lucasarts_18

me gustaría saber que diablos es obj (no se de donde sale y que representa)

No estoy seguro de entender cuál es la duda. obj es el nombre del parámetro y es totalmente arbitrario, nosotros lo escogemos al declarar la función. Igualmente pudimos usar objeto, param, parametro, etc. La única restricción es que ese mismo nombre lo usemos en el cuerpo de la función.

Tengo la impresión- aunque puedo equivocarme, desde luego -que la confusión viene de otra parte, y es que hay elementos que quizá no estén del todo claros.

Lo primero que hay que tener en cuenta es que en javascript se pueden crear objetos al vuelo, sin necesidad de un constructor. Por ejemplo, cuado ponemos

options =
{
  script: 'test.php',
  varname: 'input'
}

estamos creando un objeto "anónimo" que tiene dos propiedades: script y varname.

Otra cosa a saber, es que podemos asignar una función a una variable y usar dicha variable para invocar la función. Por ejemplo:

// declaramos una función
function saludar(mensaje)
{
  alert(mensaje);
}

// asignamos la función a una variable
s = saludar;

// invocamos la función a través de la variable:
s('hola mundo');

Pero, más interesante aún, es que podemos asignar a la variable directamente la implementación de la función:

// asignamos la función a una variable
s = function saludar(mensaje)
     {
       alert(mensaje);
     }

// invocamos la función através de la variable:
s('hola mundo');

sin tener que declararla previamente.

Pero no sólo a variables. También podemos asignar funciones a propiedades de un objeto, y ésta es- de hecho -la forma en que se crean métodos en javascript.

Así pues, cuando ponemos:

options =
{
  script: 'test.php',
  varname: 'input',
  callback: function(obj)
  {
    alert(obj.id);
  }
}

estamos creando un objeto con dos propiedades: script y varname, y un método, callback. El control AutoSuggest es quien internamente invoca a este método, pasándole como parámetro el objeto JS que corresponda a la opción seleccionada.

Tendría que examinar a detalle el código fuente del control para saber qué es exactamente lo que hace, pero bien puede ser algo similar esto:

El constructor:

function AutoSuggest(nombre, options)
{
  this.nombre = nombre;
  this.script = options.script;
  this.varname = options.varname;
  this.callback = options.callback;

  ...
}

Cuando escribimos algo en el control de edición asociado, el control AutoSuggest manda llamar al script que le indicamos para obtener elementos coincidentes. Dicho script regresa una lista en el formato que ya sabes. El AutoSuggest seguramente hace un "parsing" de esa lista y construye un objeto por cada elemento, por ejemplo:

this.results = Array();

this.results[0] =
{
  id: 1,
  info: '',
  value: 'Bastian'
}

this.results[1] =
{
  id: 2,
  info: '',
  value: 'Bartolomeo'
}

this.results[2] =
{
  id: 3,
  info: '',
  value: 'Castillo'
}

Cuando el usuario selecciona un elemento, el control determina a qué elemento de esta lista corresponde y ha de hacer algo como:

// si se asignó un callback...
if (this.callback)
{
  // ...invocarlo pasándole el objeto seleccionado como parámetro.
  this.callback(this.results[i]);
}

this.results[i] pasa a ser, entonces, el obj al que se refiere el cuerpo de la función.

Bye

[lucasarts_18]

Empezado por keyboy

options =
{
  script: 'test.php',
  varname: 'input',
  callback: function(obj)
  {
    alert(obj.id);
  }
}

estamos creando un objeto con dos propiedades: script y varname, y un método, callback. El control AutoSuggest es quien internamente invoca a este método, pasándole como parámetro el objeto JS que corresponda a la opción seleccionada.

Excelente explicación, gracias, te debo una.....

Hasta Luego .-