Recuperar datos de autocompletar en campos de texto independientes

[satjaen]

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:

<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.

[rodrigo791]

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

[satjaen]

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

[satjaen]

Pongo tambien el ajax:

Código Javascript:

(function($){
    $.fn.autosugguest = function(config) {
 
        var defaults = {
            className: 'suggest',
       methodType: 'POST',
            addParams: null,
               rtnIDs: false,
             dataFile: 'data_ajax.php',
             minChars:  3,
             fadeTime:  100
          };
 
        var config = $.extend(defaults, config);
 
        config.addParams = (config.addParams != '') ? '&' + config.addParams : '';
 
        $('<div class="ausu-suggestionsBox"><img src="images/arrow.png" /><ul></ul></div>').appendTo('.' + config.className);
        $(".ausu-suggestionsBox > ul li").live('mouseover', function()
        {
            var sel = $(this).parent().find("li[class='selected']").removeClass('selected');
                $(this).addClass('selected');
            });
 
        $("." + config.className + " > input").keyup(function(event)
        {
           var fieldParent = $(this).parents('div.' + config.className);
 
           if (event.which != 39 && event.which != 37 && event.which != 38 && event.which != 40 && event.which != 13 && event.which != 9 ) {
 
                fieldVal = fieldParent.find('input:eq(0)').val();
                suggest(fieldVal,this.id);
           } else {
 
             var fieldChild  = fieldParent.find('.ausu-suggestionsBox > ul');
 
             switch (event.which)
                {
                 case 40: { keyEvent(fieldChild,'next');break; }
                 case 38: { keyEvent(fieldChild,'prev');break; }
                 case 13:
                 {
                        fieldParent.children('input:eq(0)').val($("li[class='selected'] a").text());
                        if (config.rtnIDs==true) fieldParent.children('input:eq(1)').val($("li[class='selected']").attr("id"));
                        fieldParent.children('div.ausu-suggestionsBox').hide();
                        return false;
                        break;
                 }
                 case 9:
                 {
                        offFocus(this); $("li").removeClass("selected");
                        break;
                 }
             }
         }
        });
 
        $("." + config.className).bind("keypress",function(event){
            if (event.keyCode == 13) return false;
        });
 
        $("." + config.className + " > input").live("blur", function(){ offFocus(this); $("li").removeClass("selected"); });
 
        function suggest(dataInput, id)
        {
            if(dataInput.length < config.minChars) {
                    $('#'+id).parent('.' + config.className).children('div.ausu-suggestionsBox').fadeOut();
            } else {
            $('#' + id + ":eq(0)").addClass('ausu-load');
                $.ajax({
                   type: config.methodType,
                    url: config.dataFile,
               dataType: "html",
                   data: "data=" + dataInput + "&id=" + id + config.addParams,
                success: function(data){
                    if(data.length >0)
                    {
                        $('#'+id).parent('div.' + config.className).children('div.ausu-suggestionsBox').fadeIn();
                        $('#'+id).parent('div.' + config.className).find('.ausu-suggestionsBox > ul').html(data);
                        $('#'+ id + ":eq(0)").removeClass('ausu-load');
                    }
                    else
                        $('#' + id + ":eq(0)").removeClass('ausu-load');
                }
              });
            }
        }
 
        function keyEvent (fieldChild,action)
        {
            yx = 0;
            fieldChild.find("li").each(function(){
                if($(this).attr("class") == "selected")
                yx = 1;
            });
            if(yx == 1)
            {
                var sel = fieldChild.find("li[class='selected']");
                (action=='next') ? sel.next().addClass("selected") : sel.prev().addClass("selected");
                sel.removeClass("selected");
            }
            else
                (action=='next') ? fieldChild.find("li:first").addClass("selected") : fieldChild.find("li:last").addClass("selected");
        }
 
        function offFocus(fieldChild)
        {
            var fieldParent =  $(fieldChild).parents('div.' + config.className);
            fieldParent.children('div.ausu-suggestionsBox').delay(config.fadeTime).fadeOut();
        }
 
        $(".ausu-suggestionsBox > ul li").live("click", function()
        {
            var fieldParent = $(this).parents('div.' + config.className);
            fieldParent.children('input:eq(0)').val($(this).text());
            if (config.rtnIDs==true) fieldParent.children('input:eq(1)').val($(this).attr("id"));
            fieldParent.children('div.ausu-suggestionsBox').hide();
        });
 
    };
})(jQuery);
 

Saludos

[satjaen]

Compañeros, no se si es en ajax donde tienen que contestarme.
Un saludo

[satjaen]

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