6

Por algum motivo meu Select2 utilizando AJAX para preenchê-lo não está funcionando. Quando eu coloco um debugger no código, ele não entra no metódo result: e também não retorna nenhum erro.

HTML:

<input type="hidden" class="bigdrop select2-offscreen" name="e7" id="e7" tabindex="-1">

JavaScript:

$("#e7").select2({
    placeholder: "Buscar",
    minimumInputLength: 3,
    ajax: {
        url:"/perfil/buscarBancas",
        dataType: 'jsonp',
        quietMillis: 100,
        data: function (term, page) { // page is the one-based page number tracked by Select2
            debugger;
            return {
                q: term, //search term
                page_limit: 10, // page size
                page: page
            };
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            debugger;
           alert("some error");
        },
        results: function (data, page) {
            debugger;
            var more = (page * 10) < data.total; // whether or not there are more results available
            // notice we return the value of more so Select2 knows if more results can be loaded
            debugger;
            return {results: data.results, more: more};
        }
    },
    formatResult: movieFormatResultText, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelectionText, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

function movieFormatResultText(movie) {
    var markup = "<table class='movie-result'><tr>";
    markup += "<td class='movie-info'><div class='movie-title'>" + movie.text + "</div>";   
    markup += "</td></tr></table>";
    return markup;
}

function movieFormatSelectionText(movie) {
    return movie.text;
}

JSON:

[
   {
      "total":"20",
      "results":[
         {
            "id":"1",
            "text":"ACAFE"
         },
         {
            "id":"2",
            "text":"ACAPLAM"
         },
         {
            "id":"3",
            "text":"ACEP"
         },
         {
            "id":"4",
            "text":"ADVISE"
         },
         {
            "id":"219",
            "text":"Aeron\u00e1utica"
         },
         {
            "id":"239",
            "text":"AMIGA P\u00daBLICA"
         },
         {
            "id":"253",
            "text":"ANBIMA"
         },
         {
            "id":"5",
            "text":"AOCP"
         },
         {
            "id":"6",
            "text":"ASPERHS"
         },
         {
            "id":"7",
            "text":"BIO-RIO"
         },
         {
            "id":"8",
            "text":"CAIP-IMES"
         },
         {
            "id":"9",
            "text":"CAJU\u00cdNA"
         },
         {
            "id":"257",
            "text":"CANPASS"
         },
         {
            "id":"165",
            "text":"CCEV - UFMT"
         },
         {
            "id":"10",
            "text":"CCV-UFC"
         },
         {
            "id":"255",
            "text":"CEC"
         },
         {
            "id":"11",
            "text":"CECIERJ"
         },
         {
            "id":"12",
            "text":"CEFET-AL"
         },
         {
            "id":"13",
            "text":"CEFET-BA"
         },
         {
            "id":"14",
            "text":"CEPERJ"
         }
      ]
   }
]

Ele chega a buscar, porém não retorna nada.

3
  • Ao acessar a url /perfil/buscarBancas na mão, acontece alguma coisa? Commented 25/02/2014 às 17:58
  • Retorna esse JSON que postei @rodrigorigotti Commented 25/02/2014 às 18:02
  • Olha o nome do seu DataType esta como JSONP e o correto era json
    – Dorath
    Commented 20/07/2015 às 15:25

4 Respostas 4

4

Segue um exemplo do select2.

HTML

<input type="hidden" class="select2" />

JavaScript

$(".select2").select2({
    placeholder: "Buscar",
    minimumInputLength: 3,
    ajax: {
        url:"/echo/json/",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                q: term, //search term
                page_limit: 10, // page size
                page: page
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {results: data.results, more: more};
        }
    },
    escapeMarkup: function (m) { return m; }
});

Exemplo JSON da resposta esperada da requisição AJAX

{"total":"20","results":[{"id":"1","text":"ACAFE"},{"id":"2","text":"ACAPLAM"},{"id":"3","text":"ACEP"},{"id":"4","text":"ADVISE"},{"id":"219","text":"Aeron\u00e1utica"},{"id":"239","text":"AMIGA P\u00daBLICA"},{"id":"253","text":"ANBIMA"},{"id":"5","text":"AOCP"},{"id":"6","text":"ASPERHS"},{"id":"7","text":"BIO-RIO"},{"id":"8","text":"CAIP-IMES"},{"id":"9","text":"CAJU\u00cdNA"},{"id":"257","text":"CANPASS"},{"id":"165","text":"CCEV - UFMT"},{"id":"10","text":"CCV-UFC"},{"id":"255","text":"CEC"},{"id":"11","text":"CECIERJ"},{"id":"12","text":"CEFET-AL"},{"id":"13","text":"CEFET-BA"},{"id":"14","text":"CEPERJ"}]};

http://jsfiddle.net/2ZYm5/

1
  • Creio que essa seja a resposta para o meu problema, ainda não pude realizar os testes, na sequência marco a sua opção, valeu. Commented 26/02/2014 às 11:06
2

Use o tipo o dataType: 'json' como o Anderson postou. Se você usar 'jsonp', isso significa que você está tentando executar uma requisição cross-domain, e no caso você precisa adicionar em sua url:

?callback=?

http://api.jquery.com/jQuery.ajax/

"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

Como diz ali, você deve adicionar o callback a sua url.

0

Realmente este select2 é todo problemático, tentei usar a um tempo atrás porém não consegui. Acabei mudando para a solução apresentada no link abaixo:

http://jqueryui.com/autocomplete/

Funciona perfeitamente e é muito fácil de usá-lo.

No site abaixo um exemplo de uso na pesquisa:

http://guiadatv.net

Espero ter ajudado.

1
  • 1
    Eu não queria mudar o plugin pois ele já é utilizado no projeto, se não tiver outro jeito mesmo vou mudar. Commented 25/02/2014 às 18:09
0

O código abaixo funcionou para mim:

<!DOCTYPE HTML PUBLIC>
<HTML>
 <HEAD>
  <TITLE> Select2 </TITLE>
    <link href="select2/select2.css" rel="stylesheet" type="text/css" />
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
    <script src="select2/select2.js"></script>
    <script src="select2/select2_locale_pt-BR.js"></script>

 <script>
        $(document).ready(function() { 
            $('#e7').select2({
                minimumInputLength: 2,
        ajax: {
            url: "teste.json",
            dataType: 'json',
            data: function (term, page) {
                return {
                    q: term
                  };
            },
            results: function (data, page) {
                return {
                    results: data
                };
            }
        }
    });

  });
    </script>
</head>
<body>
    <input type="hidden" id="e7" style="width:300px" class="input-xlarge" />
</body>
</html>

E a resposta no formato json com esta formatação:

[{
    "id": "1",
    "text": "resultado1"
  }, {
    "id": "2",
    "text": "resultado2"
  }
]

Espero que resolva seu problema.

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 .