Foros del Web » Programando para Internet » PHP » Frameworks y PHP orientado a objetos »

Autocomplete en CI

Estas en el tema de Autocomplete en CI en el foro de Frameworks y PHP orientado a objetos en Foros del Web. Hola a todos Estoy creando una tienda online en CI, tengo en la columna izquierda un buscador al que quiero aplicarle un autocomplete en Ajax. ...
  #1 (permalink)  
Antiguo 13/04/2011, 02:23
Avatar de Xirant  
Fecha de Ingreso: noviembre-2010
Mensajes: 21
Antigüedad: 13 años, 4 meses
Puntos: 0
Autocomplete en CI

Hola a todos

Estoy creando una tienda online en CI, tengo en la columna izquierda un buscador al que quiero aplicarle un autocomplete en Ajax.

He cargado el JS jquery.autocomplete.js, y he añadido este código de script antes del input del buscador =>

Código PHP:
<script>
var 
libros = new Array("Alicia en el pais de la
maravillas"
,"Aladin","Angeles y demonios","Barba Roja","La Celestina");

$(
document).ready(function(){
$(
"#example").autocomplete(libros);
$(
"#example").setOptions({max2});
});
</script> 
Con el input en id = example funciona perfectamente bien. La idea es que el array de var libros sean realmente los titulos de los libros que tengo en la BD. Igual estoy empanada (muy posible) pero lo he intentado de varias maneras y no atino a que se carguen los dichosos títulos.

El srcipt está aplicado directamente en el view col_izquierda.php.

Muchas gracias por adelantado!!
  #2 (permalink)  
Antiguo 13/04/2011, 10:20
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 4 meses
Puntos: 43
Respuesta: Autocomplete en CI

Hola, esto no es CI sino que esta armado con mi propio framework, pero tal vez te pueda dar una idea para implementarlo en CI

archivo js:
Código Javascript:
Ver original
  1. //autocomplete de productos
  2.         $("#producto").autocomplete({
  3.             source: 'index.php?controlador=index&accion=listado',
  4.             minLength: 1,
  5.             select: function( event, ui ) {
  6.                 $( "#producto" ).val( ui.item.label );
  7.                 $( "#idproductos" ).val( ui.item.value );
  8.                 $( "#precio" ).val( ui.item.desc );
  9.                 $( "#codigo" ).val( ui.item.icon );
  10.        
  11.                 return false;
  12.             }
  13.         });

vista html
Código HTML:
Ver original
  1. <div class="field">
  2.                 <div class="ui-widget">
  3.                 <span><strong>C&oacute;digo: </strong></span>
  4.                 <input id="codigo" name="codigo" value="" class="xsmall"/>
  5.                 <span><strong>Nombre: </strong></span>
  6.                 <input id="producto" name="producto" value="" onfocus="this.value='';"/>
  7.                 <input id="precio" name="precio" type="hidden" value=""/>
  8.                 <input id="idproductos" name="idproductos" type="hidden" value=""/>
  9.                 <span><strong>Cantidad: </strong></span>
  10.                 <input id="cantidad" name="cantidad" value="0" size="4" type="text" class="xsmall" onchange="validarCantidad(this.value)" />
  11.                 <input type="hidden" name="id_user" value="<?php echo $datos->id_user;?>"/>
  12.                 <button type="submit"><span>Sumar</span></button>
  13.                 </div>
  14.  
  15.             </div>

controlador .php
Código PHP:
Ver original
  1. /**
  2.      * devuelve el listado de productos para el autocomplete
  3.      * @version 0.1
  4.      * @author Lucas M. sastre
  5.      * @access public
  6.      * @name listado
  7.      *
  8.      */
  9.     public function listado() {            
  10.         $prod = $this->Productos->listadoProductosCaja($_REQUEST);
  11.         $datos = "[";
  12.         for($i=0;$i<count($prod);$i++) {
  13.         $datos .= '{"label": "'.stripslashes(utf8_encode($prod[$i]['nombre'])).'","value": "'.$prod[$i]['idproductos'].'","desc": "'.$prod[$i]['precio'].'","icon": "'.$prod[$i]['codigo'].'"}';
  14.         if($i<count($prod)) {
  15.             $datos .= ",";
  16.         }
  17.         }
  18.         $coma = strrpos($datos,',');
  19.         $datos = substr_replace($datos, '', $coma,1);
  20.         $datos .= "]";
  21.         echo $datos;
  22.  
  23.     }

Básicamente lo que hago es en mi js llamar al controlador que devuelve la busqueda en formado json, y desde el js voy separando los distintos valores de la consulta y lo asigno a los elementos del formulario.

Esto lo uso en mi sistema de gestión de mi negocio, donde el autocomplete lo uso para buscar un producto a vender.

Espero que te sirva para guiarte y hacerlo en CI

Saludos
  #3 (permalink)  
Antiguo 17/04/2011, 03:41
Avatar de Xirant  
Fecha de Ingreso: noviembre-2010
Mensajes: 21
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Autocomplete en CI

Hola, destor! Lo primero darte las gracias y disculparme por no agradecerte antes que me eches un cable :o)

He revisado tu código, se adapta más o menos a lo que debo hacer, lo único, tengo que hacer la codificación en java (no se si me explico bien, lo siento). He estado estos tres últimos días dándole vueltas y algo he mejorado, pero sigo sin conseguirlo. Estos son los pasos que he dado y el punto donde me he quedado =>

1 ) He preparado un input en un buscador con un 'onkeyup' que carga una función java que pasa por post el valor del input. Esta es la función =>

Código PHP:
function librosBusqueda (){
   var 
lalala =  document.getElementById("busquedalibro").value;
   $.
post('http://localhost/proyecto/index.php/libros/devuelveLibrosAutocomplete','titulo=' lalala,getResponseAutocomplete);

La función llama por un lado al valor del input y lo pasa a un controlador 'Devuelve librosautocomplete. Este es el controlador =>

Código PHP:
    public function devuelveLibrosAutocomplete(){

        
$titulo $this->input->post("titulo");

        
        if(
$titulo != false)
        {
            
$libros_array $this->Libros_model->buscarLibros("titulo",$titulo);

            
$loquesedebever "[";
            
$cont 0;
            foreach (
$libros_array as $libros){
                
                if(
$cont == 0)
                {
                    
$loquesedebever $loquesedebever "'" $libros["titulo"] . "'";
                }
                else
                {
                    
$loquesedebever $loquesedebever "," "'" $libros["titulo"] . "'";
                }
                
$cont $cont 1;
            }
            
$loquesedebever $loquesedebever "]";
           echo 
json_encode($loquesedebever);
        }
    } 
Llama al modelo, que tiene la búsqueda en la base de datos y hace la revisión, haciendo al final un echo en JSON y llevando a la última función, en java, que es la getResponseAutocomplete =>

Código PHP:
function getResponseAutocomplete(response)
{
    
alert(response);

    var 
libros = eval(response);

    $(
"#busquedalibro").autocomplete(libros);


Aquí es donde creo que estoy teniendo el problema, que seguro que es una tontería. He puesto un alert para ver que los parámetros de la BD lelgan bien, y de hecho lo hacen, se cargan los ´titulos de la base de datos según la letra que ponga y que la contengan. El problema es que a la hora de convertirlo en array de java, algo estoy escribiendo mal, sin duda, o eso creo al menos.

He probado con eval tal cual está escrito. Con eval con paréntesis y +, y no consigo que carguen como autocomplete.
  #4 (permalink)  
Antiguo 19/04/2011, 13:21
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 4 meses
Puntos: 43
Respuesta: Autocomplete en CI

Hola,
primero que nada te dejo un ejemplo del modelo que uso para mi autocomplete
Código PHP:
Ver original
  1. /**
  2.      * devuelve todos los productos para la caja
  3.      * @return <array>
  4.      */
  5.     public function listadoProductosCaja($data) {
  6.         $sql = "SELECT * FROM productos WHERE 1 ";
  7.  
  8.         if(!empty($data['idproductos'])) {
  9.             $sql .= " AND idproductos='{$data['idproductos']}'";
  10.         }
  11.         if(!empty($data['idproveedores'])) {
  12.             $sql .= " AND idproveedores='{$data['idproveedores']}'";
  13.         }
  14.         if(!empty($data['nombre'])) {
  15.             $sql .= " AND nombre LIKE '{$data['nombre'][0]}%'";
  16.         }
  17.         if(!empty($data['term'])) {
  18.             $sql .= " AND (nombre LIKE '%{$data['term']}%' OR codigo LIKE '%{$data['term']}%')";
  19.         }
  20.         if(!empty($data['codigo'])) {
  21.             $sql .= " AND codigo LIKE '{$data['codigo'][0]}%'";
  22.         }
  23.  
  24.         $sql .= " AND stock !=0";
  25.  
  26.        
  27.         $consulta = $this->db->QueryArray($sql);
  28.  
  29.         if(!$consulta) {
  30.             $consulta = $this->db->Error();
  31.         }
  32.         return $consulta;
  33.     }

la variable $data['term'] es el campo que usa el autocomplete de jquery ui para hacer la busqueda.

Ahora a lo que me comentas en tu ultimo post intenta dejar como esta imprimiendo el alert el json para ver que estas haciendo mal, pero me parece que le estas errando al querer pasarlo por js al json ya que eso lo deberias devolver con el controlador.

salu2

Etiquetas: 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 03:52.