1

Ao utilizar o autocomplete do Jquery Ui tenho tido um pequeno problema. Estou a performar uma busca ajax para alimentar um campo de texto. Nesse campo será buscada uma disciplina e o autocomplete monta o menu de auto-sugestão.

A busca e apresentação dos dados funciona corretamente. O problema é o autocomplete faz a busca uma vez ou não atualiza o refinamento de dados quando um ou mais caracteres são adicionados por exemplo:

inserir a descrição da imagem aqui

Ex.: se faço a busca BAN me é apresentado BANCO DE DADOS e KANBAN como resultados. Se eu adicionar mais um caractere e formar BANO, o menu de sugestão não é escondido(uma vez que não foi encontrado dado algum). Se eu adicionar mais um caractere e formar BANC a opção KANBAN não é escondida

Resumindo, no terceiro caractere a busca é feita, porém, quando um novo caractere é adicionado o menu de auto-sugestão não é atualizado.

Tenho o seguinte código:

HTML

<input type="text" id="nm">

JQUERY

$("#nm").autocomplete({
    minLength:3, 
    source: function(request,response){
        $.post({
            url:'getDisciplina.php',
            dataType:'json',
            data:{'term':request.term},
        }).done(function(data){
            response($.map(data,function(item){
                return({
                    label: item.label,
                    value: item.label,
                    id:    item.value,
                });
            }));
        });
    },

getDisciplina.php

public function getDisciplina(){
    $data = (isset($_POST['term']))?$_POST['term']:false;

    $model = new DisciplinaModel;
    $rs = $model->getDisciplina($data);

    $arr = [];
    if($rs){
        foreach ($rs as $r){
            array_push($arr,["label"=>$r->descr,"value"=>$r->descr,"id"=>$r->id]);
        }
        print_r(json_encode($arr));         
    }
    else{
        print_r(false);
    }

//Retorna algo como:[{"label":"Banco de Dados I","value":"2"},{"label":"Kanban","value":"3"}]
2
  • Teu problema não é no jquery, e sim no like do banco que esta errado, seria legal colocar a query para facilitar.
    – Otto
    23/09/2016 às 17:04
  • A query estava correta, não havia nada de errado com ela, foi um problema no fluxo false do php que não estava sendo passado no formato json 23/09/2016 às 18:48

1 Resposta 1

0

Descobri o problema, o detalhe é que eu não estava tratando o retorno false para do meu PHP como um JSON.

public function getDisciplina(){
    $data = (isset($_POST['term']))?$_POST['term']:false;

    $model = new DisciplinaModel;
    $rs = $model->getDisciplina($data);

    $arr = [];
    if($rs){
        foreach ($rs as $r){
            array_push($arr,["label"=>$r->descr,"value"=>$r->descr,"id"=>$r->id]);
        }
        print_r(json_encode($arr));         
    }
    else{
        array_push ($arr,["label"=>false,"value"=>false,"id"=>false]);
        print_r(json_encode($arr));
    }
}

Com o retorno correto ficou facil manipular o widget, contudo, foi necessário fazer o fechamento da auto-sugestão manualmente.

// Função Autocomplete do jquery ui
$( "#nm" ).autocomplete({
    minLength:3, 
    source: function(request,response){
        $.post({
            url:'/mvc/Disciplina/getDisciplina',
            assync:true,
            dataType:'json',
            data:{'term':request.term},
        }).done(function(data){
            if(data[0].value){
                response($.map(data,function(item){
                    return({
                        label: item.label,
                        value: item.value,
                        id:    item.id,
                    });
                }));
            }   
            else{
                $( "#nm" ).autocomplete('close');
            }
        });
    },
});

Seria interessante fazer que o autocomplete fechasse a janela de auto-sugestão automaticamente, porém não tenho a intenção de refatorar esse código agora

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .