Error request with jquery-autocomplete?

Question

I have the following file gulpfile.js build, to generate the files css and js. He’s generating me two files:

$('#instituicao').autocomplete({
        source: function (request, response) {
            $.getJSON("/path/ajax", { q: request }, function(result) {
                response($.map(result, function(item) {
                    console.log(item);
                    return item.nome;                        
                }));
            });
        },
        minLength: 5,
        delay: 100
});

When I type, the object is printed on the console:

Example of JSON of Objeto charged:

[{"id":"7","nome":"EEEF EURIDICE LOPES PEDROSO","endereco":"aqui vir\u00e1 o endere\u00e7o"},{"id":"10","nome":"EEEFM JUSCELINO KUBITSCHEK DE OLIVEIRA","endereco":"aqui vir\u00e1 o endere\u00e7o"},{"id":"20","nome":"EEEF TANCREDO DE ALMEIDA NEVES","endereco":"aqui vir\u00e1 o endere\u00e7o"},{"id":"21","nome":"EEEFM PADRE EZEQUIEL RAMIN","endereco":"aqui vir\u00e1 o endere\u00e7o"}]

But not in the view autocomplete listing box.

<div class="form-group">
    <input type="text" autocomplete="off" id="instituicao" name="instituicao" 
     class="form-control" placeholder="Nome da Instituição de ensino">
</div>

What I’m doing wrong?

PS: I know it’s not CSS, because when I send the object this way it works:

var data = [{"id":"7","nome":"EEEF EURIDICE LOPES PEDROSO","endereco":"aqui vir\u00e1 o endere\u00e7o"},{"id":"10","nome":"EEEFM JUSCELINO KUBITSCHEK DE OLIVEIRA","endereco":"aqui vir\u00e1 o endere\u00e7o"},{"id":"20","nome":"EEEF TANCREDO DE ALMEIDA NEVES","endereco":"aqui vir\u00e1 o endere\u00e7o"},{"id":"21","nome":"EEEFM PADRE EZEQUIEL RAMIN","endereco":"aqui vir\u00e1 o endere\u00e7o"}];

$('#instituicao').autocomplete({
      valueKey:'nome',
      source: [data],
      minLength: 5,
      delay: 100
});

Answer 1

I solved using another library, which works perfectly:

http://easyautocomplete.com/guide#sec-data-remote

function highlightText(data, term) {

    term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
    var pattern = new RegExp("("+term+")", "gi");
    data = data.replace(pattern, "<mark>$1</mark>");
    data = data.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/span>)/,"$1</mark>$2<mark>$4");

    return data;
}

function autoCompleteSchools(field) {

    var $el = $('#'+field);

    var options = {
        url: function(param) {
             return "path/ajax" +  param;
        },
        getValue: function(element) {
            return  element.nome;
        },
        template: {
            type: "custom",
            method: function(value, item) {
                var param = $el.val();
                return '<span class="school">'+highlightText(item.nome, param)+'</span><br><span class="address">'+highlightText(item.endereco, param)+'</span>';
            }
        },
        list: {
            onSelectItemEvent: function() {
                var value = $el.getSelectedItemData().label;
                var id = $el.getSelectedItemData().id
                $('#id_school').val(id).trigger("change");
                $el.val(value).trigger("change");
            },
            maxNumberOfElements: 10,
            theme: "square"
        },
        select:function(event, element){
            return element.label
        }
    };

    $el.easyAutocomplete(options);

Answer 2

I think the problem is that you’re not passing the parameter correctly:

$.getJSON("/path/ajax", { q: request }, function(result) {

I believe it would be right:

$.getJSON("/path/ajax", { q: request.term }, function(result) {

Another possibility is that going directly through [], then you have to do it in the callback too:

$.getJSON("/path/ajax", { q: request }, function(result) {
    response([result]);
});