Page 1 of 1

Modifying select2 settings

Posted: Thu Mar 16, 2023 3:59 am
by stephen21345

I want to ensure my select2 search does not do any search until there is at least 3 characters entered.
How can I set select2 Option minimumInputLength to 3 for a Select2 dialog.

If I can only set this globally, how can I hook the select2 handler for a specific field on a specific tables search page to no send a request unless there is a minimum query length?

Thanks
Stephen


Re: Modifying select2 settings

Posted: Thu Mar 16, 2023 8:42 am
by mobhar

Re: Modifying select2 settings

Posted: Mon Mar 20, 2023 6:05 am
by stephen21345

This doesnt seem to assist. Even when set globally like this the search results stiull appear even when the is no characters entered, or less than the number I have specified. I think I may need to hijack and wrap the transport or similar function in select2 javascript library on the client side and only send the ajax query if there is the required number of characters entered, but I am unclear on the right way to do this.


Re: Modifying select2 settings

Posted: Mon Mar 20, 2023 8:40 am
by arbei

You may set both ew.selectMinimumInputLength and ew.selectOptions.minimumResultsForSearch to a larger number, i.e. "the required number of characters entered".


Re: Modifying select2 settings

Posted: Mon Mar 20, 2023 11:55 am
by stephen21345

It seems that this is global setting is affecting my non-modal selects.
However I am trying to get a modal checkbox (which I believe is actually a select2 with multi select enabled) to holdback on doing the ajax request to populate the modal list until 3 characters are entered.
In this case it is not being affected by this global setting.
Is there some way to set a minimum characters limit it in this case?


Re: Modifying select2 settings

Posted: Mon Mar 20, 2023 3:44 pm
by arbei

Assume you use v2023, you may use the "select2" event to change the options for a field, e.g.

$(document).on("select2", args => {
	// console.log(args); // Check the options first
	if (args.name == "...") { // Check if it is your field
		// Manipulate args.options
	};
});

Re: Modifying select2 settings

Posted: Tue Mar 21, 2023 10:44 am
by mobhar

The link I mentioned above is intended to make all Select2 control to always display the Search textbox on it.

However, you may still actually override that global setting only for the specific page, for example, put this code in Client Script section of Add and/or Edit page under the specific table:

ew.selectMinimumInputLength = 3; // Minimum 3 characters required to start a search

Re: Modifying select2 settings

Posted: Thu Mar 23, 2023 9:58 am
by stephen21345

I seem to need to target a specific event to get any output, but can only get output for when an item is selected or unselected in that way, but not before or due to search input being enter, so it is not doing what I need

@arbei

// no output ever
$(document).on("select2", args => { console.log(args); });
// output when I select something from the list
$(document).on("select2:select", args => { console.log(args); });
// output when I unselect something from the list
$(document).on("select2:unselect", args => { console.log(args); });

@mohbar:
This does not seem to do anything to stop the list loading when using a "modal checkbox" select2 which is what I am using


Re: Modifying select2 settings

Posted: Thu Mar 23, 2023 10:10 am
by arbei
  1. Your code only views the argument, not doing anything. The first event is BEFORE creating the Select2 control so you may change the args.options.
  2. Your code for 2nd and 3rd events were wrong, you may read Select2's doc on its Events.