Codeigniter - Problema com Autocomplete

[violin101 0]

Caros amigos saudações...

 

Estou reescrevendo o meu Sistema WEB usando o Template AdminLTE-2.4.3.

 

Durante o processo de rotina me deparei com um problema que não estou conseguindo resolver.

 

Criei uma Rotina para AUTOCOMPLETE, mas infelizmente quando o usuário digita algo no campo INPUT TYPE="TEXT", ao invés da caixa de itens aparece abaixo do INPUT, aparece bem abaixo do FOOTER do sistema.

 

Anexei a imagem da tela para os amigos entender e marquei com retângulo vermelho para os amigos verificar.

 

Abaixo estou postando o Código:

 

Controller

 <?php
 defined('BASEPATH') OR exit('No direct script access allowed');
 
 class Cotacoes extends CI_Controller {
 

    function __construct()
    {
        parent::__construct();
        if ((!session_id()) || (!$this->session->userdata('logado'))) {
           redirect('cotas/login');
        }

        $this->load->helper(array('form', 'codegen_helper'));
        $this->load->model('cotas/cotacoes_model', '', true);

    }

    /*
     * Linhas de Comando AUTOCOMPLETE 
     */
    public function autoCompleteProduto($IDcategoria = null)
    {
      $this->load->model('cotas/cotacoes_model');
      if (isset($_GET['term'])) {
        $q = strtolower($_GET['term']);
        $this->cotacoes_model->autoCompleteProduto($q, $IDcategoria);
      }
    }
    /**/
   
?>

 

Model

 <?php
class Cotacoes_model extends CI_Model
{

    function __construct()
    {
        parent::__construct();
    }
  
    /*
     * Linhas de Comando AUTOCOMPLETE
     */
    public function autoCompleteProduto($q, $IDcategoria = null){
      $this->db->select('produtos.*, clientes.*' )
               ->from('produtos')
               ->where('produtos.clientes_idClientes', $this->session->userdata('idCli'))
               ->like('prdDescr', $q)
               ->limit(5)
               ->order_by('prdDescr', 'ASC');

      // se for passada uma $IDcategoria
      if ($IDcategoria) {
        $this->db->where('produtos.clientesCategoria_idClienteCategoria', $IDcategoria);
      }

      $this->db->join('clientes', 'produtos.clientes_idClientes = clientes.idClientes');

      $query = $this->db->get();

      if ($query->num_rows() > 0) {
        foreach ($query->result_array() as $row) {
          $row_set[] = ['label' => $row['codPrdClie'].' - '.$row['prdDescr'].' - '.$row['prdUnid'], 'id' => $row['idProdutos'] ];
        }
        echo json_encode($row_set);
      }
    }    
    /**/

?>

 

 

View

  <form id="formProdutos" enctype="multipart/form-data" method="post" action="<?php echo base_url() ?>cotas/cotacoes/adicionarProduto"  >

      <div class="box-body">
      
       <div class="col-lg-10">
         <label for="produto">Produto<span class="required">*</span></label>
         <input type="text" id="produto" name="produto" style="width:100%;" class="form-control" onkeyup="up(this)" placeholder="Descrição do Produto" /> 
       </div>
    </div>
    
  </form>

 

JAVASCRIPT

<script type="text/javascript">

        $("#formProdutos").validate({
            rules: {
                produto: {required: true},
                quantidade: {required: true}
            },
            messages: {
                produto: {required: '<span style="color:#ff0000;">Selecione um Produto</span>'},
                quantidade: {required: '<span style="color:#ff0000;">Informe uma Qtde</span>'}
            },
            submitHandler: function (form) {
                var dados = $(form).serialize();
                $("#divProdutos").html("<div class='progress progress-info progress-striped active'><div class='bar' style='width: 100%'></div></div>");
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url();?>cotas/cotacoes/adicionarProduto",
                    data: dados,
                    dataType: 'json',
                    success: function (data) {
                        if (data.result == true) {
                            $("#divProdutos").load("<?php echo current_url();?> #divProdutos");
                            $("#quantidade").val('');
                            $("#comenta").val('');
                            $("#refere").val('');
                            $("#produto").val('').focus();
                        } else {
                            alert('Ocorreu um erro ao tentar adicionar produto.');
                        }
                    }
                });

                return false;
            }

        });


      /*
       * Linhas de Comando AUTOCOMPLETE 
       */
        // define o select de categorias
        var selectCategoria = $('select#categoriasId');

        // cria uma variável com escopo em window
        window.categoriaSelecionada = selectCategoria.val()

        // se houver alteração de categoria
        selectCategoria.on('change', function () {
            // altera a variável em window
            window.categoriaSelecionada = this.value;
            // remove o autocomplete
            $("#produto").autocomplete("destroy");
            // resolve a url do autocomplete
            resolveAutocomplete();
        })

        function resolveAutocomplete() {
            $("#produto").autocomplete({
                source: "<?php echo base_url(); ?>cotas/cotacoes/autoCompleteProduto/" + window.categoriaSelecionada + '/',
                minLength: 2,
                select: function (event, ui) {
                    $("#idProdutos").val(ui.item.id);
                    $("#quantidade").focus();
                }
            });
        }

        // inicia o autocomplete
        resolveAutocomplete();   
      /**/
  
  
</script>

 

 

Grato  a todos.

 

Cesar

 

 

 

[violin101 0]

Caros amigos saudações...

 

Consegui resolver o problema do Autocomplete.

 

Faltou acrescentar as Biblioteca - [ CSS e JS ]