Modifying select2 settings

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
stephen21345
User
Posts: 42

Modifying select2 settings

Post 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


mobhar
User
Posts: 11660

Post by mobhar »


stephen21345
User
Posts: 42

Post 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.


arbei
User
Posts: 9281

Post by arbei »

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


stephen21345
User
Posts: 42

Post 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?


arbei
User
Posts: 9281

Post 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
	};
});

mobhar
User
Posts: 11660

Post 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

stephen21345
User
Posts: 42

Post 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


arbei
User
Posts: 9281

Post 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.

Post Reply