Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Recuperar datos de autocompletar en campos de texto independientes

Estas en el tema de Recuperar datos de autocompletar en campos de texto independientes en el foro de Frameworks JS en Foros del Web. Hola, tengo un autocompletar que me funciona bien pero los datos recuperados se me imprimen todos en el mismo campo que es: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código ...
  #1 (permalink)  
Antiguo 28/10/2012, 11:29
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Recuperar datos de autocompletar en campos de texto independientes

Hola, tengo un autocompletar que me funciona bien pero los datos recuperados se me imprimen todos en el mismo campo que es:
Código HTML:
Ver original
  1. <input type="text" size="100" value="" name="apellidos" id="apellidos" autocomplete="off"  />
y lo que quiero es recuperarlos en input independientes.

Este es parte de el formulario:

Código PHP:
<div id="wrapper">
       <
form action="index_ajax.php" method="get">
           <
div class="ausu-suggest">
              <
input type="text" size="30" value="" name="telefono" id="telefono" autocomplete="off" />
              <
input type="text" size="100" value="" name="apellidos" id="apellidos" autocomplete="off"  />
              <
input type="text" size="100" value="" name="poblacion" id="poblacion" autocomplete="off"  />
               <
input type="text" size="100" value="" name="aparato" id="aparato" autocomplete="off"  />
          </
div>
       </
form

y este el php

Código PHP:
<?php
/*
 * AUSU jQuery-Ajax Autosuggest v1.0
 * Demo of a simple server-side request handler
 * Note: This is a very cumbersome code and should only be used as an example
 */

# Establish DB Connection
$con    =   mysql_connect("localhost","root","root");
if (!
$con){ die('Could not connect: ' mysql_error()); }
mysql_select_db("pruebas"$con);

# Assign local variables
$id     =   @$_POST['id'];          // The id of the input that submitted the request.
$data   =   @$_POST['data']; 

if (
$id && $data)
{
    if (
$id=='telefono')
    {
        
$query "SELECT U.nombre, U.apellidos, U.num_usuario, U.telefono, D.poblacion, au.num_aparato, au.aparato, au.modelo, au.marca, au.num_serie
, au.num_producto, au.fecha_compra
FROM usuarios U

INNER JOIN dir_usuarios D ON U.num_usuario = D.num_usuario

INNER JOIN ap_usuarios au ON U.num_usuario = au.num_usuario

WHERE CONCAT( nombre, ' ', apellidos ) LIKE '%$vnm%' AND U.telefono LIKE '%$data%' AND D.poblacion LIKE '%$vpo%' GROUP BY U.num_usuario
                  "
;
     
$result mysql_query($query);

        
$dataList = array();

        while (
$row mysql_fetch_array($result))
        {
        
$toReturn   $row['telefono'];
        
$dataList[] = '<li id="' .$row['apellidos'] .$row['poblacion'].$row['aparato']. '"><a href="#">' htmlentities($toReturn) . '</a></li>';
                      
            
        }
     if (
count($dataList)>=1)
        {
            
$dataOutput join("\r\n"$dataList);
            echo 
$dataOutput;
        }
        else
        {
            echo 
'<li><a href="#">No Results</a></li>';
        }
}
}
?>
Gracias.
  #2 (permalink)  
Antiguo 28/10/2012, 12:38
Avatar de rodrigo791  
Fecha de Ingreso: noviembre-2009
Ubicación: Uruguay
Mensajes: 1.339
Antigüedad: 15 años, 1 mes
Puntos: 168
Respuesta: Recuperar datos de autocompletar en campos de texto independientes

y supongo que tendrás que fijarte en la parte ajax que hiciste en donde estás almacenando la respuesta desde el servidor, seguro estás almacenando la respuesta en ese input que mencionas
  #3 (permalink)  
Antiguo 28/10/2012, 12:57
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Recuperar datos de autocompletar en campos de texto independientes

Rodrigo791, la respuesta la quiero recuperar en campos de texto independientes por lo que tengo que sustituir esto no?:

Código PHP:
$result mysql_query($query); 

        
$dataList = array(); 

        while (
$row mysql_fetch_array($result)) 
        { 
        
$toReturn   $row['telefono']; 
        
$dataList[] = '<li id="' .$row['apellidos'] .$row['poblacion'].$row['aparato']. '"><a href="#">' htmlentities($toReturn) . '</a></li>'
Entonces esto modificarlo para que se reciba cada valor de $row en el nombre del input del formulario:

Código PHP:
<div id="wrapper"
       <
form action="index_ajax.php" method="get"
           <
div class="ausu-suggest"
              <
input type="text" size="30" value="" name="telefono" id="telefono" autocomplete="off" /> 
              <
input type="text" size="100" value="" name="apellidos" id="apellidos" autocomplete="off"  /> 
              <
input type="text" size="100" value="" name="poblacion" id="poblacion" autocomplete="off"  /> 
               <
input type="text" size="100" value="" name="aparato" id="aparato" autocomplete="off"  /> 
          </
div
       </
form
Los únicos que recibo correctamente en cada input son el teléfono y los apellidos porque es ahí en el campo apellidos donde me imprime todos los demás datos juntos en el mismo input(apellidos,poblacion,aparato).En lugar de mostrarme el campo apellidos solo, luego otro campo con el valor del campo poblacion y otro con el campo aparato.
Un saludo
  #4 (permalink)  
Antiguo 28/10/2012, 15:27
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Recuperar datos de autocompletar en campos de texto independientes

Pongo tambien el ajax:

Código Javascript:
Ver original
  1. (function($){
  2.     $.fn.autosugguest = function(config) {
  3.  
  4.         var defaults = {
  5.             className: 'suggest',
  6.        methodType: 'POST',
  7.             addParams: null,
  8.                rtnIDs: false,
  9.              dataFile: 'data_ajax.php',
  10.              minChars:  3,
  11.              fadeTime:  100
  12.           };
  13.  
  14.         var config = $.extend(defaults, config);
  15.  
  16.         config.addParams = (config.addParams != '') ? '&' + config.addParams : '';
  17.  
  18.         $('<div class="ausu-suggestionsBox"><img src="images/arrow.png" /><ul></ul></div>').appendTo('.' + config.className);
  19.         $(".ausu-suggestionsBox > ul li").live('mouseover', function()
  20.         {
  21.             var sel = $(this).parent().find("li[class='selected']").removeClass('selected');
  22.                 $(this).addClass('selected');
  23.             });
  24.  
  25.         $("." + config.className + " > input").keyup(function(event)
  26.         {
  27.            var fieldParent = $(this).parents('div.' + config.className);
  28.  
  29.            if (event.which != 39 && event.which != 37 && event.which != 38 && event.which != 40 && event.which != 13 && event.which != 9 ) {
  30.  
  31.                 fieldVal = fieldParent.find('input:eq(0)').val();
  32.                 suggest(fieldVal,this.id);
  33.            } else {
  34.  
  35.              var fieldChild  = fieldParent.find('.ausu-suggestionsBox > ul');
  36.  
  37.              switch (event.which)
  38.                 {
  39.                  case 40: { keyEvent(fieldChild,'next');break; }
  40.                  case 38: { keyEvent(fieldChild,'prev');break; }
  41.                  case 13:
  42.                  {
  43.                         fieldParent.children('input:eq(0)').val($("li[class='selected'] a").text());
  44.                         if (config.rtnIDs==true) fieldParent.children('input:eq(1)').val($("li[class='selected']").attr("id"));
  45.                         fieldParent.children('div.ausu-suggestionsBox').hide();
  46.                         return false;
  47.                         break;
  48.                  }
  49.                  case 9:
  50.                  {
  51.                         offFocus(this); $("li").removeClass("selected");
  52.                         break;
  53.                  }
  54.              }
  55.          }
  56.         });
  57.  
  58.         $("." + config.className).bind("keypress",function(event){
  59.             if (event.keyCode == 13) return false;
  60.         });
  61.  
  62.         $("." + config.className + " > input").live("blur", function(){ offFocus(this); $("li").removeClass("selected"); });
  63.  
  64.         function suggest(dataInput, id)
  65.         {
  66.             if(dataInput.length < config.minChars) {
  67.                     $('#'+id).parent('.' + config.className).children('div.ausu-suggestionsBox').fadeOut();
  68.             } else {
  69.             $('#' + id + ":eq(0)").addClass('ausu-load');
  70.                 $.ajax({
  71.                    type: config.methodType,
  72.                     url: config.dataFile,
  73.                dataType: "html",
  74.                    data: "data=" + dataInput + "&id=" + id + config.addParams,
  75.                 success: function(data){
  76.                     if(data.length >0)
  77.                     {
  78.                         $('#'+id).parent('div.' + config.className).children('div.ausu-suggestionsBox').fadeIn();
  79.                         $('#'+id).parent('div.' + config.className).find('.ausu-suggestionsBox > ul').html(data);
  80.                         $('#'+ id + ":eq(0)").removeClass('ausu-load');
  81.                     }
  82.                     else
  83.                         $('#' + id + ":eq(0)").removeClass('ausu-load');
  84.                 }
  85.               });
  86.             }
  87.         }
  88.  
  89.         function keyEvent (fieldChild,action)
  90.         {
  91.             yx = 0;
  92.             fieldChild.find("li").each(function(){
  93.                 if($(this).attr("class") == "selected")
  94.                 yx = 1;
  95.             });
  96.             if(yx == 1)
  97.             {
  98.                 var sel = fieldChild.find("li[class='selected']");
  99.                 (action=='next') ? sel.next().addClass("selected") : sel.prev().addClass("selected");
  100.                 sel.removeClass("selected");
  101.             }
  102.             else
  103.                 (action=='next') ? fieldChild.find("li:first").addClass("selected") : fieldChild.find("li:last").addClass("selected");
  104.         }
  105.  
  106.         function offFocus(fieldChild)
  107.         {
  108.             var fieldParent =  $(fieldChild).parents('div.' + config.className);
  109.             fieldParent.children('div.ausu-suggestionsBox').delay(config.fadeTime).fadeOut();
  110.         }
  111.  
  112.         $(".ausu-suggestionsBox > ul li").live("click", function()
  113.         {
  114.             var fieldParent = $(this).parents('div.' + config.className);
  115.             fieldParent.children('input:eq(0)').val($(this).text());
  116.             if (config.rtnIDs==true) fieldParent.children('input:eq(1)').val($(this).attr("id"));
  117.             fieldParent.children('div.ausu-suggestionsBox').hide();
  118.         });
  119.  
  120.     };
  121. })(jQuery);
Saludos
  #5 (permalink)  
Antiguo 29/10/2012, 12:16
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Recuperar datos de autocompletar en campos de texto independientes

Compañeros, no se si es en ajax donde tienen que contestarme.
Un saludo
  #6 (permalink)  
Antiguo 30/10/2012, 13:38
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Recuperar datos de autocompletar en campos de texto independientes

Hola, estoy intentando hacer este autocompletar pero no se en que estoy fallando.

buscar.php

Código PHP:
<?php 

if(isset($_GET['numtelefono']) && $_GET['numtelefono'] !="")
{
require_once(
'Connections/conexion.php'); 

$sql="select telefono from usuarios whrere telefono like '".$_GET['numtelefono']."%'";

mysql_query($sql,$miconexion) or die (mysql_error());

while (
$fila=mysql_fetch_assoc($resultado))

echo 
"<li>".$fila['telefono']."</li>\n";

}

?>

index.php

Código PHP:
<!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>
<
script language="javascript" src="js_menu/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script language="javascript">
$(document).ready(function()
{
$("#telefono").keyup(function()
{
   $.get('buscar.php' ,{ numtelefono: $("#telefono").val() }, function(datos)
   {
       if (datos!="")
       
          $("#zonaresultado").addClass("zonaconborde");
          else
           $("#zonaresultado").removeClass("zonaconborde");
           
           $("#zonaresultado").html(datos);
       
   },"txt");
});
}); // JavaScript Document
</script>
<style>
.enlace_sugerencia_over{
    background-color: #3366CC;
}

div.zonaconborde{
    
 margin-top:5px;
 margin-left:165px;
 width:153px;
 background-color:#FFFFFF;
 text-aling: left;
 border: 1px solid #000000;
}

li{
    list-style:none;    
}

body{
    background-color:#CF9;
    
    }
#telefono{
    font-size:12px;
    font-style:italic;
    
    }    
</style>
</head>
<body>
<td width="9%"><input name="telefono" id="telefono" type="text" size="9" /></td>
<div id="zonaresultado"></div>
</body>
</html> 
Gracias

Etiquetas: campos, formulario, html, independientes, mysql, variables, usuarios, autocompletado
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 09:29.