Dear all,
I have a problem to implement maximumSelectionSize on autocompleter. I put this js code above the autocompleter
And when I test the form, it show an error on browser console "Uncaught query function not defined for Select2 nomor". Any advice to solved this?
Thank you.
I have a problem to implement maximumSelectionSize on autocompleter. I put this js code above the autocompleter
jQuery(document).ready(function($){
$("#nomor").select2(
{
maximumSelectionSize:3
}
);
});And when I test the form, it show an error on browser console "Uncaught query function not defined for Select2 nomor". Any advice to solved this?
Thank you.
Hi Yudhizth,
Sorry, I can't get this to work either. At the moment I can't see the cause :-(
Bob
Sorry, I can't get this to work either. At the moment I can't see the cause :-(
Bob
No problem. I solved this with create an autocompleter manually.
and put the select2 js on js file
http://localhost/jom/libraries/cegcore/assets/select2/select2.min.js
and put all css of select2
http://localhost/jom/libraries/cegcore/assets/select2/select2.css
http://localhost/jom/libraries/cegcore/assets/select2/select2-bootstrap.css
http://localhost/jom/libraries/cegcore/assets/select2/select2-gcore.css
jQuery(document).ready(function($){
$("#nomor").select2(
{
minimumInputLength: 1,
containerCss:{"min-width":"200px"},
width: "element",
multiple: true,
maximumSelectionSize:3,
//tags: true,
tokenSeparators: [","," "],
ajax:{
url: "http://localhost/jom/index.php?option=com_chronoforms5&chronoform=limit-autocompleter&event=number&tvout=ajax",
dataType: "json",
data: function (term, page){
return {
nomor: term,
};
},
results: function (data, page){
return {results: data};
}
},
formatNoMatches: "Error!!",
formatSearching: "Loading....",
formatAjaxError: "No Data Found....",
initSelection: function(element, callback){
var data = [];
$(element.val().split(",")).each(function (){
data.push({id: this, text: this});
});
callback(data);
}
}
);
});and put the select2 js on js file
http://localhost/jom/libraries/cegcore/assets/select2/select2.min.js
and put all css of select2
http://localhost/jom/libraries/cegcore/assets/select2/select2.css
http://localhost/jom/libraries/cegcore/assets/select2/select2-bootstrap.css
http://localhost/jom/libraries/cegcore/assets/select2/select2-gcore.css
Hi Yudhizth ,
Sorry, a bit late but here's the simpler solution. Add this to a Load JavaScript action *After* the AutoComplete action and before the HTML (Render form) action.
Bob
PS For other readers, replace nomor with the ID of the autocompleter element and it should work for other options if you replace maximumSelectionSize = 2 with the option name and value.
Sorry, a bit late but here's the simpler solution. Add this to a Load JavaScript action *After* the AutoComplete action and before the HTML (Render form) action.
jQuery(document).ready(function(jQ){
jQ('#nomor').data('select2').opts.maximumSelectionSize = 2;
});Bob
PS For other readers, replace nomor with the ID of the autocompleter element and it should work for other options if you replace maximumSelectionSize = 2 with the option name and value.
Thank you Bob,
with the code above, where can I set the maximumSelectionSize?
with the code above, where can I set the maximumSelectionSize?
This topic is locked and no more replies can be posted.
