Buy Now
Sign in

Maximum Selection Size Autocompleter

Yudhizth , March 03 2017
Answered
Y
Yudhizth
Dear all,

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.
Attachments
Screen_Shot_2017-03-03_at_3.48.53_PM.png
Screen_Shot_2017-03-03_at_3.48.53_PM.png
(44.9 KiB)
131 Downloads/Views
GreyHead
Hi Yudhizth,

Sorry, I can't get this to work either. At the moment I can't see the cause :-(

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
Y
Yudhizth
No problem. I solved this with create an autocompleter manually.

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
    Attachments
    Screen_Shot_2017-03-10_at_10.04.29_AM.png
    Screen_Shot_2017-03-10_at_10.04.29_AM.png
    (22.2 KiB)
    112 Downloads/Views
    GreyHead
    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.
    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.
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    Y
    Yudhizth
    Thank you Bob,

    with the code above, where can I set the maximumSelectionSize?
    GreyHead
    Hi Yudhizth ,

    Oops - sorry, it got deleted in editing - now replaced.

    Bob
    ChronoForms technical support
    If you'd like to buy me a coffee or two, thank you very much
    Y
    Yudhizth
    Thank you Bob,

    It's working fine now, thanks.

    God bless you

    Yudhizth