Foros del Web » Programando para Internet » Jquery »

pasar varias varibles autocomplete

Estas en el tema de pasar varias varibles autocomplete en el foro de Jquery en Foros del Web. Hola a todos, os expongo problema y objetivo. De una caja de texto llamo a una funcion autocomplete. La consulta que utilizo para el select ...
  #1 (permalink)  
Antiguo 10/05/2015, 11:25
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
pasar varias varibles autocomplete

Hola a todos, os expongo problema y objetivo.

De una caja de texto llamo a una funcion autocomplete. La consulta que utilizo para el select deriva en un array con dos valores --> value y codigo. Mi intención es pasar a traves del formulario las dos variables del array por separado. Os pongo codigo:



header.php

Código PHP:
 <script type="text/javascript">
            $(function(){
                $(
'#producto').autocomplete({
                    
                   
source 'lib/template/search.php',
                   
                   
minLength2,
                   
                   
select : function(eventui){
                       $(
'#resultados').slideDown('slow');
                   }});
            });
        
</script>
 <form name="form" action="Searching.php" method="POST">                               
<input type="text"  id="producto" />
  </form> 
lib/template/search.php
Código PHP:
include_once "auto.php";
$buscado = new Buscador();

$valoresjson_encode($buscado->buscar($_GET['term']));


echo 
$valores
y auto.php
Código PHP:
class Buscador
{
    public function  
__construct() {
        
$dbhost 'localhost';
        
$dbuser 'root';
        
$dbpass '';
        
$dbname 'bd';
        
mysql_connect($dbhost$dbuser$dbpass);
        
mysql_select_db($dbname);
    }

    public function 
buscar($elemento){
        
$datos = array();
         
$sql "(SELECT objeto,codigo FROM main   WHERE objeto  LIKE '$elemento%'  GROUP BY  objeto LIMIT 7)";
         
$sqla "(SELECT marca,codigo FROM main   WHERE marca  LIKE '$elemento%'  GROUP BY  marca LIMIT 7)";
         
$sqlb "(SELECT dispositivo,codigo FROM main   WHERE dispositivo  LIKE '$elemento%'  GROUP BY  dispositivo LIMIT 7)";
        
$resultado mysql_query($sql);
        while (
$row mysql_fetch_array($resultadoMYSQL_ASSOC)){
            
$datos[] = array("value" => ucfirst(strtolower ($row['objeto'])),"codigo" => 1);
        }
        
$resultado mysql_query($sqla);
        while (
$row mysql_fetch_array($resultadoMYSQL_ASSOC)){
            
$datos[] = array("value" => ucfirst(strtolower ($row['marca'])),"codigo" => 2);
        }
         
$resultado mysql_query($sqlb);
        while (
$row mysql_fetch_array($resultadoMYSQL_ASSOC)){
            
$datos[] = array("value" => ucfirst(strtolower ($row['dispositivo'])),"codigo" => 3);
        }
        
        return 
$datos;
    }

El array deriva en value y codigo, lo que quiero es enviar value y codigo como variables y realizar la busqueda.

Un saludo y gracias
  #2 (permalink)  
Antiguo 10/05/2015, 11:35
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Los valores que pasan por value los paso sin problemas a través de una variable, lo que no logro es pasar los valores 1, 2, 3 de codigo a través de un hidden
  #3 (permalink)  
Antiguo 10/05/2015, 12:00
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: pasar varias varibles autocomplete

En el objeto ui se almacena el objeto JSON que devuelves desde PHP. Solo tienes que leerlo y tomar los valores de la propiedad codigo para asignarlo al campo oculto.

Para empezar, empieza haciendo esto:

Código Javascript:
Ver original
  1. select: function(event, ui){
  2.     console.log(ui); //<-- Añade esta línea
  3.     $('#resultados').slideDown('slow');
  4. }

Y en la consola del navegador (en Chrome, pulsa la tecla F12 y selecciona la opción 'Console' del panel inferior que se desplegará) verifica los valores que recibes. De no haber problemas, deberías de recibir un array con varios arrays, en donde cada uno tendrá los índices value y codigo, entonces, si deseas tomar solo los valores del índice codigo, tendrías que, primero, recorrer al array principal y, en cada iteración, tomar el valor del índice en cuestión.

Código Javascript:
Ver original
  1. for (var i = 0, total = ui.length; i < total; i++){
  2.     console.log(ui[i].codigo); //Mostrará en consola el valor de cada código
  3. }

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #4 (permalink)  
Antiguo 10/05/2015, 12:21
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Hola gracias por contestar

En consola me aparece
Código Javascript:
Ver original
  1. XHR finished loading: GET "http://localhost/web/lib/template/search.php?term=fer".x.ajaxTransport.send @ jquery.min.js:6x.extend.ajax @ jquery.min.js:6x.each.x.(anonymous function) @ jquery.min.js:6x.extend.getJSON @ jquery.min.js:6e.widget._initSource.source @ jquery-ui-1.8.4.custom.min.js:310e.widget._search @ jquery-ui-1.8.4.custom.min.js:311e.widget.search @ jquery-ui-1.8.4.custom.min.js:311(anonymous function) @ jquery-ui-1.8.4.custom.min.js:306

El último código lo introduzco en consola??
Código Javascript:
Ver original
  1. for (var i = 0, total = ui.length; i < total; i++){
  2.     console.log(ui[i].codigo); //Mostrará en consola el valor de cada código
  3. }
Cuando te refieres recorrer el array te refieres en JS?


Gracias de nuevop
  #5 (permalink)  
Antiguo 10/05/2015, 12:30
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: pasar varias varibles autocomplete

Cita:
Iniciado por pips Ver Mensaje
En consola me aparece
Código Javascript:
Ver original
  1. XHR finished loading: GET "http://localhost/web/lib/template/search.php?term=fer".x.ajaxTransport.send @ jquery.min.js:6x.extend.ajax @ jquery.min.js:6x.each.x.(anonymous function) @ jquery.min.js:6x.extend.getJSON @ jquery.min.js:6e.widget._initSource.source @ jquery-ui-1.8.4.custom.min.js:310e.widget._search @ jquery-ui-1.8.4.custom.min.js:311e.widget.search @ jquery-ui-1.8.4.custom.min.js:311(anonymous function) @ jquery-ui-1.8.4.custom.min.js:306
Creo que te hice imprimir la variable equivocada.

Mira este ejemplo que hice el año pasado. También devuelvo un array codificado en formato JSON el cual contiene arrays con varios valores, en donde cada uno es asignado a distintos elementos HTML.

Cita:
Iniciado por pips Ver Mensaje
Cuando te refieres recorrer el array te refieres en JS?
Debes de saber que jQuery solo es una librería de JavaScript, no un lenguaje de programación, por lo que si te refieres a jQuery, te estás refiriendo a JavaScript. Puedes usar un bucle (código nativo) o un método iterativo de jQuery para recorrer el array. Para el caso, da lo mismo. Por ejemplo, en el ejemplo que hice, utilizo el método _renderItem para recorrer el array devuelto por la petición y así poder crear elementos HTML por cada registro.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 10/05/2015, 12:47
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Gracias por tu respuesta, me lo leo, lo estudio y intentaré implementarlo
__________________
pips
  #7 (permalink)  
Antiguo 10/05/2015, 13:17
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Hola he probado con esto pero la variable no se envia
Lo siento pero soy un completo inepto en tema jquery, JS y similares
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.             $(function(){
  3.                 $('#producto').autocomplete({
  4.                    source : 'lib/template/search.php',
  5.            minLength: 2,
  6.                    select : function(event, object){
  7.                       $('#resultados').html(object.item.value);
  8.                       $(".dato").eq(0).html(object.item.codigo);
  9.                       $('#resultados').slideDown('slow');
  10.                    }});
  11.             });
  12.         </script>

Código HTML:
<input type="text"  id="producto" name ="search"/>
<input type="hidden" class="dato" name="dato" /> 
  #8 (permalink)  
Antiguo 10/05/2015, 13:42
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: pasar varias varibles autocomplete

Imprime en consola el valor de object.item para saber qué devuelve.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #9 (permalink)  
Antiguo 10/05/2015, 13:51
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Código Javascript:
Ver original
  1. Uncaught ReferenceError: object is not definedmessage: "object is not defined"stack: (...)get stack: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: StackTraceGetter__proto__: function Empty() {}<function scope>set stack: function () { [native code] }__proto__: Error(anonymous function) @ VM675:2InjectedScript._evaluateOn @ VM569:883InjectedScript._evaluateAndWrap @ VM569:816InjectedScript.evaluate @ VM569:682

por var_dump($dato) sale null

gracias
__________________
pips
  #10 (permalink)  
Antiguo 10/05/2015, 14:00
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: pasar varias varibles autocomplete

¿Cómo recibes y procesas en el archivo PHP el dato escrito en la caja de texto?
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #11 (permalink)  
Antiguo 10/05/2015, 14:13
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Código PHP:
Ver original
  1. public function getSearch($search,$filterData = null, $pagina = FALSE, $orden=FALSE){
  2.             $dato = $_REQUEST["dato"];
  3.             var_dump($dato); //No ok
  4.         $products= preg_replace('#[^a-z 0-9?!]#i', '',htmlspecialchars($_REQUEST["search"])) ;
  5.         var_dump($products); //ok

Muchas gracias por tu tiempo, sólo una pregunta, más o menos voy bien encaminado con el código JS? es para no robarte más tiempo y voy probando....
__________________
pips
  #12 (permalink)  
Antiguo 10/05/2015, 14:34
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: pasar varias varibles autocomplete

El widget autocomplete envía el dato a través de la variable term, por eso fue que usé ese nombre en el ejemplo para recibirlo. No te sirven ni 'dato' ni 'search'.

Y con respecto al código JS, pues, a un <input> se le asigna un valor mediante la propiedad value, por lo que deberías de usar el método val para el campo oculto de nombre 'dato'.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #13 (permalink)  
Antiguo 10/05/2015, 18:00
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Bueno, siguiendo tu ejemplo y resumiendo

Código PHP:
Ver original
  1. <!DOCTYPE html>
  2. <html lang = "es">
  3.     <head>
  4.         <meta charset = "utf-8" />
  5.         <title>Buscador</title>
  6.         <link rel = "stylesheet" type = "text/css" href = "jquery-ui-css.css" />
  7.         <link rel = "stylesheet" type = "text/css" href = "style.css">
  8.     </head>
  9.     <body>
  10.         <section id = "main">
  11.          <form name="form" action="productsearching.php" method="POST">
  12.             <label for = "buscar">Buscar:</label>
  13.             <input type = "text" name = "buscar" id = "buscar" placeholder = "Ingresa el dato a buscar" autofocus />
  14.             <input type = "hidden" name = "" id = "dato"/>
  15.             <script type = "text/javascript">
  16.              document.getElementById('dato').value;
  17.             </script>
  18.           </form>
  19.         </section>
  20.         <section id = "response">
  21.             <img />
  22.             <div id = "datos">
  23.                 <header>
  24.                     <h1></h1>
  25.                 </header>
  26.  
  27.                 <p>
  28.                     <label class = "ref">Nombre</label>
  29.                     <label class = "dato"></label>
  30.                 </p>
  31.  
  32.             </div>
  33.         </section>
  34.         <script type = "text/javascript" src = "jquery.js"></script>
  35.         <script type = "text/javascript" src = "jquery-ui.js"></script>
  36.         <script type = "text/javascript">
  37.         $("#buscar").keyup(function(e){
  38.     var tecla = e.keyCode || e.which;
  39.     if (tecla != 13)
  40.         if ($("#response").css("display") != "none")
  41.             $("#response").slideUp();
  42.             }).autocomplete({
  43.                 minLength: 1,
  44.                 source: "buscar.php",
  45.                 select: function (event, object){
  46.                     $("#response h1").html(object.item.value);
  47.                     $(".dato").eq(0).html(object.item.nombre);
  48.                     $("#response").slideDown();
  49.                 }
  50.             })
  51.        
  52.         </script>
  53.     </body>
  54. </html>

Cómo paso los objetos html(object.item.value) y html(object.item.nombre) a productsearching.php

Código PHP:

$value 
$_REQUEST['value'];

$nombre $_REQUEST['nombre']; 
Ó cómo creo una variable en php de html(object.item.nombre) ?

He intentado con

<script type="text/javascript">
document.getElementById('dato').value;
</script>
pero no hay manera. gracias y saludos
  #14 (permalink)  
Antiguo 10/05/2015, 18:16
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: pasar varias varibles autocomplete

Asígnalos a campos del formulario y envíalos. Eso es todo.

En el ejemplo los asigno a etiquetas porque solo los mostraré, pero si deseas enviarlos a otro archivo para que los procese, entonces tendrás que asignarlos a campos de formulario como <input>, <select>, <textarea> o los que vayas a usar.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #15 (permalink)  
Antiguo 11/05/2015, 04:38
 
Fecha de Ingreso: octubre-2011
Mensajes: 104
Antigüedad: 12 años, 6 meses
Puntos: 1
Respuesta: pasar varias varibles autocomplete

Hola, por fín lo conseguí, muchas gracias por tu ayuda y tus consejos, seguro que se puede limpiar un poco el codigo pero asi funciona

Código Javascript:
Ver original
  1. <script type = "text/javascript">
  2.         $("#buscar").keyup(function(e){
  3.     var tecla = e.keyCode || e.which;
  4.     if (tecla != 13)
  5.         if ($("#response").css("display") != "none")
  6.             $("#response").slideUp();
  7.             }).autocomplete({
  8.                 minLength: 1,
  9.                 source: "buscar.php",
  10.                 select: function (event, object){
  11.                     $("#response h1").html(object.item.value);
  12.                     $('input[name="buscar"]:hidden').val(object.item.value);
  13.                      $('input[name="dato"]:hidden').val(object.item.nombre);
  14.                     $(".dato").html(object.item.nombre);
  15.                     $("#response").slideDown();
  16.                 }
  17.             })
  18.  
  19.         </script>

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:39.