Autocomplete with JQuery UI -Function Select

Question

Autocomplete with JQuery UI -Function Select

Navigation

#1 by (1 votes)

2

Good, as I do so that the values of the array that returns me are loaded in the inputs, I see that the Select function of the autocomplete has a problem, console.log(ui.item) appears Object {label: "22222", value: "22222"} , when I want to send me {id:...,codigo:...,descripcion:...} What would be my mistake? thank you very much.

Éste es mi controlador:

 public function getarticulos() {
        $q = trim($this->input->get('term'));    

        $productoresult = $this->articulo_model->find($q);
        $result = array();
        foreach ($productoresult as $i =>$articulo) {
            $result[$i]['id'] = $articulo->id;
            $result[$i]['codigo'] = $articulo->codigo;
            $result[$i]['descripcion'] = $articulo->descripcion;
            $result[$i]['precioactual'] = $articulo->precioactual;


        }          
        echo json_encode($result);
    }
Éste es el modelo:

public function find($q){

    return $this->db->query("select * from articulo where codigo like '%$q%'")->result();
}  

VISTA (aclaro q de esta manera me funciona el autocompletar, de otras maneras ya intente)

 $(function() {
        var cache = {};
        $( "#txtcodigo" ).autocomplete({
          minLength: 2,
          source: function( request, response ) {
            var menus = new Array();
            var term = request.term;
            if ( term in cache ) {
              response( cache[ term ] );
              return;
            }

            $.getJSON( "<?php echo base_url() ?>index.php/articulo/getarticulos", request, function( result, status, xhr ) {
                  cache[ term ] = result;

            var count = result.length;
            console.log(result);
                    console.log(count);
                      for (var i = 0; i < count; i++) {
                        menus[i] = { codigo: result[i].codigo, id: result[i].id, descripcion:result[i].descripcion};
                        console.log(menus[i]);
                         cache[ term ][i] = result[i].codigo;                    
                    }
              response(result);
            });

          },
           select: function( event, ui ) {               
                    $("#txtcodigo").val(ui.item.codigo); 
                     $("#txtid").val(ui.item.id);  
                        return false;

                 }         

        });
      });



    <label for="txtcodigo">Codigo: </label>
  <input id="txtcodigo">
    <label for="txtid">id: </label> 
  <input id="txtid">

php bootstrap codeigniter

asked by mer 06.03.2016 в 23:37

source

1 answer

problems with nav navbar-nav and dropdown-toggle Insert in the form of text value of property css in div destination

score 1 · Answer 1

What you have to have in your controller in the autocomplete function is controller.php

public function autocompletar(){
    //si es una petición ajax y existe una variable post
    //llamada info dejamos pasar
    if($this->input->is_ajax_request() && $this->input->post('info'))
    {

    $abuscar = $this->security->xss_clean($this->input->post('info'));

    $search = $this->autocompletado_model->buscador($abuscar);

    //si search es distinto de false significa que hay resultados
    //y los mostramos con un loop foreach
    if( $search !== FALSE){
        foreach($search as $fila => $valor){
            echo '<p><a href="<?= site_url('class/mehtod/'.$fila)?>"><?= $valor ?></a></p>
        }

    //en otro caso decimos que no hay resultados
    }else{


        echo '<p>No hay resultados</p>';
        }   
    }   
}

in the model.php

public function buscador($abuscar){
    //usamos after para decir que empiece a buscar por
    //el principio de la cadena
    //ej SELECT localidad from localidades_es 
    //WHERE localidad LIKE '%$abuscar' limit 12
    $this->db->select('localidad');

    $this->db->like('localidad',$abuscar,'after');

$resultados = $this->db->get('localidades_es', 12);

//si existe algún resultado lo devolvemos
if( $resultados->num_rows() > 0){
    return $resultados->result();
//en otro caso devolvemos false
}

    else{   
        return FALSE;
    }
}

the js function to do the autocomplete search

    $(document).ready(function(){
    //utilizamos el evento keyup para coger la información
    //cada vez que se pulsa alguna tecla con el foco en el buscador
    $(".autocompletar").keyup(function(){

        //en info tenemos lo que vamos escribiendo en el buscador
        var info = $(this).val();
        //hacemos la petición al método autocompletar del controlador autocompletado
        //pasando la variable info
        $.post('autocompletado/autocompletar',{ info : info }, function(data){

            //si autocompletado nos devuelve algo
            if( data != ''){
                //en el div con clase contenedor mostramos la info
                $(".contenedor").html(data);
            }
            else{
                $(".contenedor").html('');
            }
        })  
    })

    //buscamos el elemento pulsado con live y mostramos un alert
    $(".contenedor").find("a").live('click',function(e){
        e.preventDefault();
        alert($(this).html());
    });         
})

the input of the html form to search

<div class="wrapper">
    <input type="text" name="autocompletar" maxlength="15" onpaste="return false" class="autocompletar" placeholder="Escribe tu búsqueda" />
    <div class="contenedor"></div>
</div>