jquery select2 - not working
select2 will not do AJAX if attached to a standard select form control. It MUST be attached to a hidden input control to load via AJAX.
Update: This has been fixed in Select2 4.0. From Pre-Release notes:
Consistency with standard
<select>elements for all data adapters, removing the need for hidden<input>elements.
It can also be seen in function in their examples section.
I guess user2315153 wants to receive multiple remote values, and incorrectly assigning select2() with ajax call to a <select> element.
The correct way to get remote values, is using a normal <input> element, and if is desired multiple values, inform the "multiple" parameter on method call. Example:
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" /><script>$('#thisid').select2({ minimumInputLength: 2, multiple: true, ajax: { ...The <select> element CAN NOT be used to remote values
UPDATE: As of select2 4.0.0, hidden inputs has deprecated:
https://select2.github.io/announcements-4.0.html#hidden-input
This means: Instead of using an input to attrib select2 plugin, use an SELECT tag.
Pay attention: it's easy to use any format of json from your server. Just use "processResults" to do it.
Example:
<select id='thisid' class='select2-input select2'></select><script> $("#thisid").select2({ multiple: true, closeOnSelect: true, ajax: { url: "myurl", dataType: 'json', delay: 250, data: function (params) { return { q: params.term, page: params.page }; }, processResults: function (data, page) { //json parse console.log("processing results"); //Transform your json here, maybe using $.map jquery method return { results: yourTransformedJson }; }, cache: (maybe)true } });</script>
I try the code, it works well. I think you not include jquery framework or check the path of js and css.
<!DOCTYPE html><html><head> <link href="select2.css" rel="stylesheet"/> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="select2.min.js"></script> <script> $(document).ready(function() { $('#thisid').select2({ minimumInputLength: 2, ajax: { url: "data.php", dataType: 'json', data: function (term, page) { return { q: term }; }, results: function (data, page) { return { results: data }; } } }); }); </script></head><body> <input type="hidden" id="thisid" style="width:300px" class="input-xlarge" /></body></html>