Select2 with AJAX

Question

Select2 with AJAX

Navigation

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

5

For some reason my Select2 using AJAX to populate it is not working. When I put a debugger in the code, it does not enter the result: method and also does not return any errors.

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"
         }
      ]
   }
]

He comes to fetch, but does not return anything.

php jquery ajax json jquery-select2

asked by anonymous 25.02.2014 / 18:52

4 answers

2

Use the type the dataType: 'json' as Anderson posted. If you use 'jsonp', it means that you are trying to execute a cross-domain request, and in case you need to add in your url:

?callback=?

link

"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.

As it says there, you should add the callback to your url.

25.02.2014 / 20:21

0

Actually this select2 is all problematic, I tried to use it a while ago but I could not. I ended up changing to the solution shown in the link below:

link

It works perfectly and is very easy to use.

In the following site an example of use in the search:

link

I hope I have helped.

25.02.2014 / 19:07

0

The code below worked for me:

<!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>

And the answer in json format with this formatting:

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

I hope it solves your problem.

25.02.2014 / 20:14

How does a historical debugger work? Double Characters in Regular Expressions

score 2 · Accepted Answer

Here is an example of 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; }
});

JSON example of the expected response of the AJAX request

{"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"}]};

link