Menu
I am using select2 plugin(ivaynberg.github.io/select2). I am trying to display a dropdown(select). It is getting all the items in data.php as options. However select2 is meant to be autocomplete plugin and should search for the search term a client input, and display the matching results only. At the moment it is displaying all the items and not getting the search results. Sorry for my language
data.php is echoing out this:
[{
"id": "1",
"text": "item1",
"exercise": "blah text"
}, {
"id": "2",
"text": "item2"
}
]
The code is:
$(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
};
}
}
});
});
and the input is:
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
I want to find a clue, I am quite new to this plugin and have spent a day for looking at examples.
638
select2 is not a function" jQuery error occurs for multiple reasons: Forgetting to include the select2 library. Loading the select2 library before the jQuery library. Loading the jQuery library twice.
Select2 does not function properly when I use it inside a Bootstrap modal. This issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal. Since by default, Select2 attaches the dropdown menu to the <body> element, it is considered "outside of the modal".
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
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.
55
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>
I think no need to go with hidden input element. You can give a try, get plain html data from ajax call and set it in and then init select2 resetting method. Here's code snippet
HTML
<select id="select" name="select" class="select2">
<option value="" selected disabled>Please Select Above Field</option>
</select>
Javascript
$.ajax({
type: "POST",
cache:false,
url: YOUR_AJAX_URL,
success: function(response)
{
$('#select').html(response);
}
});
$('#select').select2("val","");
Ajax Response :
<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
