Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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...
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.
Quem é baseurl ?
Trabalhe com caminhos relativos:
url: '/services/autocomplete',
faz esse teste e posta aqui o resultado..
success: function(data) {
console.log( data );
}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.
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...