Busca autocomplete com jquery

[Cazzeri 1]

Boa tarde, estou tentando criar uma busca onde conforme o usuário vai digitando, vai aparecendo os resultados.

No meu php retorno os dados com json_encode e segue o meu js:

$('body').on('keyup', '#texto', function(){

  var texto = $('#texto').val();

  $.ajax({

    url: ''+baseurl+'services/autocomplete', 
    type: 'post',
    data: { texto: texto },
    success: function(data) {
      var html = $('.buscar-itens').html("");
      $(data).each(function(index){
        html.text('<img class="media-object" src="'+baseurl+'assets/loja/'+this.imagem+'" ><h5><b>'+this.nome+'</b></h5>');
      });
  
    }

  });

});

No console aparece Illegal invocation... já tentei outros eventos, como live, delegate e bind. Alguém tem alguma outra ideia de fazer esse tipo de busca? Sem ser o jquery-ui...

[Snowden 94]

No meu php retorno os dados com json_encode ...

 

falta então..

dataType: 'json',

o parâmetro da url também não está devidamente setado

url: ''+baseurl+'services/autocomplete', // incorreto

url: ''+baseurl+'services/autocomplete/', // correto

url: baseurl+'services/autocomplete/', // correto

e no loop...

$.each(data, function(index, item){
   // item.nome
   // item.imagem
});

[Cazzeri 1]

Obrigado pelas observações Hugo, mas já fiz retorno de dados dessa maneira e sempre deu certo... acho que o problema é esse evento, o keyup. Segue a ideia completa:

 

JS:

$('body').on('keyup', '#buscar', function(){

  var buscar = $('#buscar').val();

  $.ajax({

    url: baseurl+'services/autocomplete/', 
    type: 'post',
    dataType: 'json',
    data: { buscar: buscar },
    success: function(data) {
      $.each(data, function(index, item){
        $('.buscar-itens').html('<img class="media-object" src="'+baseurl+'assets/loja/'+item.imagem+'" <h5><b>'+item.nome+'</b></h5>').show();
      });
  
    }

  });


});

O serviço que chama o query:

  public function autocomplete() {

    $buscar = $this->input->post('buscar');
    $query = $this->others->buscar($buscar);
    header('Content-type: application/json');
    echo json_decode($query);

  }

E a função que retorna os resultados:

  public function buscar($buscar) {

    $loja = $this->load->database('loja', TRUE);

    $loja->like('nome', $buscar);
    $loja->or_like('descricao', $buscar);
    $query = $loja->get('itens');
    return $query->result();    

  }

E aqui um outro exemplo com js que faço retorno dos dados para dentro de um modal... e deu certo:

$('body').on('click', '.exibicao-item', function(){

  var id_item = $(this).attr('id');
  var nome = $(this).attr('name');

  $('.modal-header .modal-title').html("").html(nome);
  $('.modal-body #id_item').val(id_item);

  $.ajax({

    url: ''+baseurl+'services/item',
    type: 'post',
    data: { id_item: id_item },
    success: function(data) {

      $(data).each(function(index){

        $('.modal-body #nome').val(''+this.nome+'');
        $('.modal-body #descricao').val(''+this.descricao+'');
        $('.modal-body #valor').val(''+this.valor+'');

      });

  });

});

Fiz as alterações, mas os dados não retornam para dentro da div.

[William Bruno 1501]

Quem é baseurl ?

 

Trabalhe com caminhos relativos:

 

url: '/services/autocomplete', 

[Snowden 94]

faz esse teste e posta aqui o resultado..

success: function(data) {
   console.log( data );  
}

[Cazzeri 1]

Putzzz... valeuuu aee a todos. Falha minha, agora que eu vi que coloquei json_decode e o certo seria json_encode kkk.

 

No console também não retornava nada.

Eu prefiro colocar na url o endereço completo, http://... e a baseurl armazena isso.