JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ivaynberg.github.io/select2/select2-3.4.5/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.4.5/select2.css">
<input type="hidden" class="select2" />
CSS
.select2 {
width:300px;
}
JavaScript
var resposta_requisicao = {
"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"
}
]
};
$(".select2").select2({
placeholder: "Buscar",
minimumInputLength: 3,
ajax: {
type: 'POST',
url:"/echo/json/",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
q: term, //search term
page_limit: 10, // page size
page: page,
json: JSON.stringify(resposta_requisicao)
};
},
...