Jqueryui autocomplete does not refine search

Asked

Viewed 81 times

1

Using the Jquery Ui autocomplete I have had a small problem. I am performing an ajax search to feed a text field. In this field a discipline will be sought and the autocomplete assembles the auto-suggestion menu.

The search and presentation of the data works correctly. The problem is the autocomplete does the search once or does not update the data refinement when one or more characters are added for example:

inserir a descrição da imagem aqui

Ex.: if I do the BAN search I am presented DATABASE and KANBAN as results. If I add one more character and form BANO, the suggestion menu is not hidden (since no given one was found). If I add one more character and form BANC the KANBAN option is not hidden

In short, in the third character the search is done, however, when a new character is added the auto-suggestion menu is not updated.

I have the following code:

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"}]
jquery html jquery-ui

  • Your problem is not in jquery, but in the like of the bank that is wrong, it would be nice to put the query to facilitate.

  • The query was correct, there was nothing wrong with it, it was a problem in the false php stream that was not being passed in json format

1 answer

0

I discovered the problem, the detail is that I was not treating the false return to my PHP as a 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));
    }
}

With the correct return it was easy to manipulate the widget, however, it was necessary to close the auto-suggestion manually. 

// 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');
            }
        });
    },
});

It would be interesting to have the autocomplete automatically close the auto-suggestion window, but I have no intention of refactoring that code now

Browser other questions tagged jquery html jquery-ui

You are not signed in. Login or sign up in order to post.