Error in request with jquery-autocomplete?

Question

Error in request with jquery-autocomplete?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have the following gulpfile.js file to generate the css files % and% with%. It is 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:

ExampleofjsofJSONloaded:

Objeto

Butnotintheview'sautocompletelistbox.

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

What am I doing wrong?

PS: I know it's not [{"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"}] , because when I send the object this way it works:

CSS

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

jquery ajax

asked by anonymous 04.01.2017 / 22:08

2 answers

0

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

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

I believe the correct thing would be this:

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

Another possibility is that if you pass directly with [] , then you have to callback as well:

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

04.01.2017 / 22:16

Is there a text editor with integration with Github? Ajax does not work, selectOneMenu in cascade

score 0 · Accepted Answer

I solved using another library, which works perfectly:

link

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);