I recently launched the Select2 APEX plugin and thought it would be a good idea to talk about its seemingly endless list of features. The plugin is so powerful that it can be used as a replacement for three traditional item types: select lists (both single and multi-select), shuttles and text fields with autocomplete. It doesn’t simply replace these item types but rather enriches them with extra functionalities and a more sophisticated user interface.
All credits of course go to the developers of Select2. My job existed of creating an APEX item type plugin on top of this wonderful jQuery library. I also strived to support all typical APEX item type settings such as a read only condition, null display value, cascading LOV, etc. I’m glad I can say this worked out pretty well resulting in a high level of integration with the APEX builder.
Here are some details and helpful links about the Select2 APEX plugin:
- Release date: August 12, 2013
- Minimum APEX version: 4.1 (since 04/09/2013)
- Browser support: IE8+, Chrome 8+, FireFox 10+, Safari 3+, Opera 10.6+
- Official Select2 website: http://ivaynberg.github.io/select2/
- apex-plugin.com: http://www.apex-plugin.com/oracle-apex-plugins/item-plugin/select2_344.html
- Demo, download and documentation page: http://apex.oracle.com/pls/apex/f?p=64237:20
- GitHub: https://github.com/nbuytaert1/apex-select2
Now let’s dive into the features of the plugin. The first thing you should be aware of is that the plugin allows you to create three different types of select lists: single-value select lists, multi-value select lists and tagging support. Some features are only available for a particular select list type, while others are shared among multiple types.
Single-value select lists
This type of select list is the most basic one and therefore contains fewer settings than the other two types. The main difference between a regular select list and a Select2 select list is the search capability, allowing the user to easily find a specific item in a lengthy list. Select lists with just a few items don’t benefit from this feature of course. That’s why there’s a Minimum Results for Search Field setting that determines whether it is useful or not to display the search field. This setting only applies to single-value select lists since the other two types always permit searches to be executed.
The Search Logic setting allows you to define the criteria under which a search term matches an option. You’ll probably recognize this setting from the Text Field with autocomplete item type as it contains the same options:
- Contains & Ignore Case (default)
- Contains & Case Sensitive
- Exact & Ignore Case
- Exact & Case Sensitive
The Minimum Input Length setting enforces the user to enter a minimum amount of characters before a search operation is performed. The screenshot below shows you all the available settings for the single-value select list. The untreated settings will be explained in just a few moments.
Multi-value select lists
A multi-value select list serves as an excellent replacement for the shuttle item. The difference here, again, lies in the user experience. A shuttle item typically takes up a lot of space and lacks the ability to search. The Select2 multi-value select list overcomes these shortcomings contributing to a more pleasant way of selecting multiple items in a list of values. It also adds an extra functionality; the Maximum Selection Size limits the maximum number of items that can be selected. You might also want to enable Rapid Selection so that the dropdown list stays open after a selection is made.
Tagging support
You can’t compare this type of select list with a pre-defined item type in APEX. That’s what makes is so interesting. In tagging mode, you can select from pre-existing options (coming from your list of values) or create new ones on the fly. Please note that the return value of this select list type is based on the display values and no longer on the return values.
Two new settings are available here. A Maximum Input Length can be set to limit the character length of new values, and it is possible to enable Drag and Drop Sorting of the selected choices. This last feature is not yet available in the current version (1.4 on the moment of writing). It will be released in version 1.5.
Remaining settings
We haven’t covered all of the settings yet. Let’s go through them quickly:
- Width: gives you control over the width of the select list page item. Have a read through the help text of this setting for more information.
- Select on Blur: tick the checkbox if you want Select2 to select the currently highlighted option when you blur out of the dropdown list.
- Label for Null Option Group: allows you to name the group for values whose grouping column value is null. The default group name is Ungrouped.
Okay, you might not understand what that last setting is all about. The Select2 APEX plugin supports option grouping based on a third column in the LOV definition SQL statement. This feature greatly improves the structure of select lists. Note that option grouping is not possible in tagging mode. Here’s an example query that groups all employees based on their department. Employees with no department assigned (hence the Label for Null Option Group) will fall under the Ungrouped group.
SELECT e.ename d , e.empno r , d.dname grp FROM emp e LEFT JOIN dept d ON d.deptno = e.deptno ORDER BY grp, d
All the features I described in this article can be tried out on the demo page. You can download the Select2 APEX plugin on that same page.
Select2 is more user friendly than the select lists of Oracle APEX. Congratulations!
We are interested to look into development of your demo application. Is the demo application available as a packaged application?
LikeLike
I’m sorry Johan, the demo application will not be made publicly available.
Using the Select2 plugin is very similar to a regular select list item type. All plugin attributes include detailed help text and example LOV queries are provided in the List of Values Examples section. That should be sufficient in my opinion.
Feel free to ask your questions here in the comments section.
Nick
LikeLike
Congratulations. This is one great upgrade of the select lists. It would be great if they introduced it into a new apex build.
LikeLike
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike
Hi Nick,
Kudos on the excellent plugin which is an incredible replacement for the shuttle item in APEX.
One small question though…How do you do a “Select All”?
I’ve been trying to do this all of yesterday using jquery…but it does’nt seem to work.
Your help would be greatly appreciated.
Thanks,
Gaurav
LikeLike
Hey Gaurav,
There’s no built-in way to accomplish a (de)select all behaviour. You’ll have to modify the core jQuery Select2 plugin and implement this feature yourself. However, this is far from easy.
A lazy solution would be to enable the rapid selection option which enables you to select/deselect all options simply by holding down the enter/backspace key. Far from user friendly, but it does the trick.
Kind regards,
Nick
LikeLike
Hi Nick,
Thanks for your response.
I was able to do get a solution using the steps outlined in http://stackoverflow.com/questions/16538399/jquery-select2-how-to-select-all-options.
Also, what I needed to do was to make sure I’m selected “Multi-value Select List” as the Select List Type…instead of “Tagging Support”.
Thanks once again for this plugin.
Regds,
Gaurav
LikeLike
Absolutely fantastic plug-in – thank you!!
LikeLike
Excellent work.
Does your plugin support redirect and set value ? I am on version apex 4.1 and i am having issues with setting select lists keys to pass them along in redirects
LikeLike
Hey Mohammed,
The APEX plugin mechanism doesn’t allow me to enable the “Page Action when Value Changed” setting. That means that the Select2 plugin does not support the “Redirect and Set Value option”.
I’d just use a dynamic action in your case. First, set the item’s value into session state, and then redirect the page. That’s all you have to do.
Hope that helps,
Nick
LikeLike
This looks very promising! Does this function in the Interactive Reports? I don’t seem to see the difference after installing the plugin in my application. Thanks!
LikeLike
Hi Megan,
The Select2 plugin has absolutely no effect on Interactive Reports. What did you expect to be different after installing the plugin by the way? Select2 is an item type plugin, so it actually has nothing to do with Interactive Reports.
Kind regards,
Nick
LikeLike
Hi,
I have used the Select2 LOV in my application for a customer display . The LOV works great .
But the client wants to display only the customer name which starts with the values keyed into the LOV.
For eg: If I type WAL, the smart filter should only display customer name which starts with WAL.Currently it is displaying those customers with WAL anywhere in customer name.
Is this possible with Select2 LOV?
Thanks,
LikeLike
Hey Kuleena,
That is not possible at the moment. I will add this feature to the plugin in one of the upcoming days. I will keep you posted.
Thanks for pointing out this missing feature.
Nick
LikeLike
I have updated the plugin. The search logic setting now includes two extra options: “Starts With & Ignore Case” and “Starts With & Case Sensitive”.
Download and re-import the Select2 APEX plugin into your application.
LikeLike
Hi,
Thanks for a great plugin! I’m not sure if this is really the best forum for support but here goes:
1. How do I create a shuttle, as you have shown in the demo?
2. How do I clear the selected events (APEX clear in a dynamic event doesn’t appear to be working)?
3. How do I refresh the data (APEX refresh not working either)?
4. How I prevent duplicates from being select? In your demo, it is forbidden but in my application, the control allows the same entry to be added multiple times.
Thanks!
mwt
LikeLike
Hello,
1. That’s pretty standard APEX functionality. Simply create a page item of type “Shuttle” and define a LOV. A step-by-step explanation can be found here: https://docs.oracle.com/database/121/HTMDB/bldapp_item.htm#CHDGCCIG
2. I guess your question is how to clear the selected items in a Select2 page item. The standard clear action should work just fine. You can also execute some JavaScript/jQuery code to clear an item’s selection: $(“#P20_DUMMY”).select2(‘data’, null);
3. It is true that the standard refresh action doesn’t work in combination with a Select2 page item. Can’t you use cascading LOV’s? More info: http://www.inside-oracle-apex.com/oracle-apex-4-0-cascading-lovsselect-lists/
4. Mhm, are you sure? The Select2 jQuery plugin automatically filters out duplicate items. Are you using the latest version of the Select2 APEX plugin? Might have been an old bug.
Hope that helps,
Nick
LikeLike
Hi Nick,
I tried to import the latest plugin (2.6.2) but I got the error :
java.sql.sqlrecoverableexception no more data to read from socket oracle.jdbc.driver.T4CMAREngine.unmarshalUB1(T4CMAREngine.java:1157)…
This error occurs with both Oracle Rest Data Services and Oracle HTTP Server, also I can import version 2.4.1 with no problem. Can you help me, please?
Sergio
LikeLike
Hey Sergio,
I haven’t seen that error before to be honest. A quick search on Google points out to problems with the connection pooling configuration. That doesn’t explain why you can import an earlier version of the plugin though. I would ask for help on the OTN forum. Make sure to mention your APEX architecture and product versions. https://community.oracle.com/community/database/developer-tools/application_express
Are you using Oracle Database XE by the way? In that case, you might be encountering the problem described in the following thread: https://community.oracle.com/thread/2312674
Keep me posted.
Kind regards,
Nick
LikeLike
Hi Nick, we have Oracle 11g XE and APEX 4.2.6. Solved!!!
The problem was the same described in the following thread: https://community.oracle.com/thread/2312674
I deleted all plsql_code in your plugin during import :
wwv_flow_api.create_plugin(…., p_plsql_code => ”,…)
and then added the pl sql code from plugin.sql
Thanks,
LikeLiked by 1 person
Glad to hear you fixed the problem.
Nick
LikeLike
Hi Nick,
Thanks for building such an excellent plugin. I have a bit of an issue that hopefully you can help with.
We have a page with a Select2 item where the item’s value can be set from a dynamic action. This works perfectly with lazy loading switched OFF, but when it is switched ON the item does not immediately display the new value. If you click on the item a couple of times it does refresh and display the new value. I have tried adding a Refresh action, but it did not work. We are running Apex 4.2.6.
I have reproduced the problem here https://apex.oracle.com/pls/apex/f?p=95623:3. Even though it is Apex 5.0 it still exhibits similiar behaviour.
Perhaps there is an action I can add to my dynamic action that will refresh the item. Any suggestions would be appreciated.
Thanks,
Michael
LikeLike
Hey Michael,
Most standard dynamic action types do not work in combination with a Select2 item that has lazy loading enabled. You will have to revert to using Select2 jQuery functions instead. You can set the value of a lazy loading Select2 item by executing the below code:
You need both the return and display value in this case.
The refresh dynamic action has no effect on a Select2 item by the way.
Hope that helps,
Nick
LikeLike
Awesome, thanks Nick that seems to have done the trick. If I’m ever in Begium I’ll buy you a beer :)
Cheers,
Michael
LikeLike
Ooh, I’ll hold you to that ;-)
Nick
LikeLike
Hi, Nick
I upgrade 4.2.6 version apex to 5.0. end select2 don’t work what doesnt mean ?
how to solve this problem ?
LikeLike
Hello Bakyt,
The Select2 APEX plugin should work in APEX 5.0. The plugin’s demo page for example runs on APEX 5.0: https://apex.oracle.com/pls/apex/f?p=64237:20
A solution might be to download and re-import the latest version of the plugin. You might be using an old version of the plugin, which is not compatible with APEX 5.0.
Best regards,
Nick
LikeLike
I re-import but not effect when I set plug in ….
howewer old version (4.6) worked
current theme 42 universal
LikeLike
Hi,
I have the same issue.
I exported my application from a apex 4.2.6 database to a working apex 5.0 database.
However even though the select list are set to use the selcet2 plugin it still show a standard select list without filtering and not the selct2 version.
I have the latest plugin 2.6.4.
Thanks
Stephan
LikeLike
Have you properly configured your static files? Please read the following article:
http://www.inside-oracle-apex.com/apex-5-0-there-are-issues-with-the-configuration-of-the-static-files-in-your-environment/
If that’s not the problem, can you reproduce on apex.oracle.com? What error(s) do you get in your browser’s console?
LikeLike
current version select 2 2.6.2 this is last version wich compatable with apex 5.0 ?
where are download last version ? link pls.
LikeLike
The latest version of the plugin is 2.6.2. at this moment.
Download link: https://apex.oracle.com/pls/apex/f?p=64237:20
I did some tests in APEX 5.0 with Universal Theme, but haven’t encountered any problems. Can you reproduce on apex.oracle.com?
LikeLike
on apex.oracle.com working, but not working my local computer
I install oracle 11g XE
maybe i not configurated any variables ?
LikeLike
The problem you are having might be related to the fact that you are using XE. Do you see an error message when importing the plugin in your application? Basically, the problem is that the plugin’s PL/SQL code is too large for XE, resulting in the malfunctioning of the plugin. Can you try the following steps to resolve the issue?
1. Import the Select2 APEX plugin
2. Copy the content of the plugin.sql file, which can be found here: https://github.com/nbuytaert1/apex-select2/blob/master/src/main/plsql/plugin.sql
3. Open the Select2 APEX plugin, under Shared Components > Plugins
4. Paste the PL/SQL code that you copied in step 2 and hit the Apply Changes button
Nick
LikeLike
When import plugin not error message , imported sucseffully
I replace plsql code, but not effect (not work plugin select2, but working usual “select list”)
LikeLike
maybe problem “jQuery Version 1.7.1+”
how I check jQuery
Version ?
maybe ths is bug apex 5.0?
not working custom plugin ?
LikeLike
whats wrong
http://127.0.0.1:8080/apex/mbk/static-files-not-configured/106/files/plugin/48321099944538992/v1/select2-bootstrap.css Failed to load resource: the server responded with a status of 404 (Not found)
http://127.0.0.1:8080/apex/mbk/static-files-not-configured/106/files/plugin/48321099944538992/v1/select2.css Failed to load resource: the server responded with a status of 404 (Not found)
http://127.0.0.1:8080/apex/mbk/static-files-not-configured/106/files/plugin/48321099944538992/v1/select2.min.js Failed to load resource: the server responded with a status of 404 (Not found)
http://127.0.0.1:8080/apex/mbk/static-files-not-configured/106/files/plugin/48321099944538992/v1/select2-apex.js Failed to load resource: the server responded with a status of 404 (Not found)
f?p=106:79:14724361484458::NO:79::&cs=3yEVk-_pVJ8RWiOOAw8ya2dBmwn0:451 Uncaught TypeError: $(…).select2 is not a function
http://127.0.0.1:8080/apex/mbk/static-files-not-configured/106/files/plugin/48321099944538992/v1/select2.css Failed to load resource: the server responded with a status of 404 (Not found)
http://127.0.0.1:8080/apex/mbk/static-files-not-configured/106/files/plugin/48321099944538992/v1/select2-bootstrap.css Failed to load resource: the server responded with a status of 404 (Not found)
LikeLike
Seems like your APEX 5.0 installation is incomplete. That’s why the file URL’s in the above output include …/static-files-not-configured/…
Take a look at the following threads on how to complete your APEX 5.0 installation:
https://community.oracle.com/message/13019606
https://community.oracle.com/message/13016437
https://community.oracle.com/message/13061941
The Select2 APEX plugin should work just fine after you have successfully configured your APEX instance.
LikeLike
Thanks, re install apex 5, configurated epg_mode, now working
LikeLike
hi, I need realization action ‘set value’ in DA for example
pop lov(item :p1) select value, in DA set value item where install plugin select2 (item :p2,:p3)
not effected (howewer select list working)
whats is wrong ?
LikeLike
Try to execute some JavaScript code to set a Select2 item’s value. For example:
LikeLike
good post but not so descriptive please provide some example
LikeLike
The demo page is overloaded with examples: https://apex.oracle.com/pls/apex/f?p=64237:20
Install the plugin yourself and play around with its settings. That is the best and easiest way to get familiar with the Select2 plugin.
Nick
LikeLike
Whay cascade LOV refresh not work?
LikeLike
The cascading LOV refresh does not work in APEX 4.1. It’s only supported in APEX 4.2 and higher. It’s difficult for item type plugins to support cascading LOVs in APEX 4.1. The support in APEX 4.2 is much better.
LikeLike
Hi
It’s perfect plugin.
I get this error on firebug when open select2 list on page (When Lazy Loading is on)
TypeError: g.results is undefined
…eateSearchChoicePosition(g.results,i)),0===g.results.length&&J(f.formatNoMatches…
My table is temporary table.
LikeLike
I need a little more info.
What APEX version are you using?
What browser are you using?
Single or multi-value select list type?
Does this error occur only when lazy loading is enabled?
Nick
LikeLike
Apex 5
Firefox
Single select list type
Yes, only when lazy loading is enabled
LikeLike
Is it possible to reproduce the bug on apex.oracle.com? The Select2 plugin’s demo page for example includes a single select list with lazy loading enabled, and it works just fine in FireFox: http://apex.oracle.com/pls/apex/f?p=64237:20
LikeLike
Hi Nick,
This is great and we are using it. We have a new requirement to display an array of these plugin types though so can you let us know if it is possible to do this in a similar way to calling the apex_item package for text, checkboxes and radiogroups please?
I am not sure it is possible but it would be amazing if this too was possible.
Thanks in advance
Phil
LikeLike
Hello Phil,
It is not possible to use the APEX_ITEM package to dynamically generate Select2 APEX plugin items. A possibility, however, would be to use APEX_ITEM.SELECT_LIST:
https://docs.oracle.com/cd/B28359_01/appdev.111/b32258/api.htm#CHDHJJAB
Then use the Select2 jQuery plugin (https://select2.github.io/) to transform the regular select list items in Select2 items. You’ll have to write some JavaScript code in this case, since you are not using the APEX plugin. But I do believe that this is a possible solution to your requirement.
Hope this helps,
Nick
LikeLiked by 1 person
Thanks Nick, I’d sort of guessed it was not possible but just wanted to explore whether or not it could be done. We’ll combine the two apex_item package work with javascript for the transform.
Best Regards,
Phil
LikeLike
Hi Nick,
I have just downloaded and installed Select2 v2.6.4 (awesome plug-in) and I have a problem – possibly user error. I am running APEX 5.0.1.
The install was fine, but my Select2 items do not seem to have changed appearance. I turned on Firebug and noticed that under the Net tab select2-ut.css was not included in the list of stuff that gets “loaded”. I then downloaded select2-ut.css and pasted the contents directly into the Theme Roller, and aha – the font in the select2 items changed (smaller font). Maybe there is something I have to refresh to get it to work.
I have a test app on apex.oracle.com – I can give you dev access if you want to check it out.
Cheers,
Michael
PS I already owe you one beer from last year …
LikeLike
Hey Michael,
Starting from version 2.6.4, the “Component Settings” section (under Shared Components) for the Select2 plugin includes a “Look and Feel” item. This attribute’s default value is “Select2”, which does not change the visual appearance of Select2 items. Selecting “Universal Theme” will result in including the select2-ut.css file at runtime.
I actually wanted to write a short blog post on this feature, but it didn’t happen yet.
Does this get me a second beer? ;-)
Nick
LikeLike
Aha, thanks Nick, that explains that.
Yes, the beer count is now 2. You will have to wait a while – it may be some time until I’m next in Belgium. But it’ll be worth the wait as you guys have such fabulous beer !!!
Cheers,
Michael
LikeLiked by 1 person
it is not working in internet explore browser. Working on chrome and Mozilla.
LikeLike
I need more info in order to help you out. What version of IE are you using? What is not working?
LikeLike
Hi Nick,
I am on APEX 5.0.3. I am using the following query :
SELECT cust_first_name d ,customer_id r ,CUSTOMER_STATE grp
FROM CUSTOMERS
ORDER by 1;
It is not showing the grouping. I tried all 3 browsers firefox, chrome and IE.
Thanks
Chandra.
LikeLike
Hey Chandra,
Your LOV query looks fine. What plugin settings did you choose for the Select2 page item? Lazy loading for example does not work together with option grouping.
Nick
LikeLike
Hi Nick,
I removed the lazy loading and now the grouping is working.
Thanks
Chandra.
LikeLike
Hello,
First of all I would like to thank you for this awesome plugin.
We have a multiple select text field. However when page submits it reorder the columns selected in alphabetical order. Is there any way to persist the selected list in the order it was selected by the user.
We have a collection query and the results needs to confirm to the order of selected columns. Your kind feedback.
LikeLike
Hi Shams,
The plugin itself does not reorder the selected items on page submit. The value of a multi Select2 item is semi-colon separated and ordered the way they were added by the end user. Is it possible that your PL/SQL code is responsible for the reordening?
Nick
LikeLike
Hi Nick,
Found your good work on Select2 plugin from Twitter Apex users group.
Works very nice with Apex 5.0.3, but we have a small problem that we can’t use it.
We look for a new client with Select2 and he is not there, so add a button calling a modal page to fill-in the new client info, submit and close modal. There it is that the new client doesn’t show up on the Select2. We have to go out of the page, reload it and then Select2 finds the new client.
What am i doing wrong?
Regards and my warmest sympathy and support for the hard times Belgium is going through!
LikeLike
Thanks for your kind words.
Are you using a dynamic action that refreshes the Select2 page item when the dialog closes? This technique is not going to work since the refresh action does not work for Select2 items.
You need a dynamic action that physically adds the new option to the LOV in HTML. To do so, pass the return and display value from the dialog page to the “normal” page. On the dialog page that creates the new client, you need a “Close Dialog” process that returns the new return and display LOV value. Use the “Items to Return” settings for this.
On the “normal” page, create a dynamic action and two “Set Value” true actions with set type “Dialog Return Item” that set the value of two hidden items. For example, P10_NEW_CLIENT_ID and P10_NEW_CLIENT_NAME (return and display value). Then, create a third action that executes the following JavaScript code:
apex.jQuery(this.affectedElements).append(” + $v(‘P10_NEW_CLIENT_NAME’) + ”);
Don’t forget to set the Select2 page item as affected element.
Hope that helps,
Nick
LikeLike
declare
tab apex_application_global.vc_arr2;
begin
tab := apex_util.string_to_table (:P2_NAPRAVL_SELECT);
for i in 1..tab.count loop
insert into NAPRAVL (ID, NAME)
select SEQ_NAPRAVL.nextval, tab(i) from dual where not exists (select ID from NAPRAVL where NAME=tab(i));
end loop;
end;
Write delete does not contain the display record?
delete NAPRAVL where NAME not in tab(i); – deletes all entries in the table
Thanks!
LikeLike
declare
tab apex_application_global.vc_arr2;
begin
tab := apex_util.string_to_table (:P2_NAPRAVL_SELECT);
for i in 1..tab.count loop
insert into NAPRAVL (ID, NAME)
select SEQ_NAPRAVL.nextval, tab(i) from dual where not exists (select ID from NAPRAVL where NAME=tab(i));
end loop;
end;
how to create a deletion of a record?
delete NAPRAVL where NAME not in tab(i) – deletes all entries in the table
Thanks!
LikeLike
Hard for me to say, but I guess something like the following:
Use the upper function on both sides to avoid case sensitivity.
LikeLike
Thanks Nick,
delete from napravl
where upper(name) = upper(tab(i));
the request deletes the entries that are visible on the display. And I need to delete records that are not visible on the display.
delete from napravl
where upper(name)!= upper(tab(i)); – deletes all entries in the table.
LikeLike
Using the non-equal operator in combination with a row by row delete is the reason why all rows are being deleted from your table. One bulk delete statement is the solution here. Are you familiar with APEX collections? Try out the following code:
LikeLike
Thanks Nick, got what wanted.
Greetings from Belarus!!!
LikeLiked by 1 person
Nick…
We’re using your Select2 plug-in with ApEx 5.0.1. Thank you for your work on it and contribution to the ApEx community.
I must be doing something wrong, but I am trying to populate the Select2 via a dynamic action and it’s not populating for me. I see a working example on your demo page, but it doesn’t really give any code/instructions. I am setting the value via a SQL statement in a very typical fashion with the Select2 as the target/affected item.
It might be a factor – not sure – that the Select2 is at the bottom of a series of dependent and cascading LOVs. I have three normal select lists which all cascade to one another and the Select2 item is dependent on the third select list. When I populate all four of these items via the one dynamic action, the three normal select lists populate fine, the Select2 displays nothing. Is there something related to my problem?
LikeLike
Hi Shane,
Difficult to say what’s going wrong. Can you replicate your problem on apex.oracle.com and grant me developer access? That allows me to take a look at the actual problem and come up with a solution.
The demo page includes a DA example based on a single-value select list. However, in some situations (e.g. multi-value, tagging, lazy-loading) you need custom JavaScript code to set the value of a Select2 item. Take a look at the official Select2 docs regarding “programmatic access”.
https://select2.github.io/examples.html#programmatic
LikeLike
Nick…
Thanx for your reply. I figured out how to get it working, and the solution matches what is outlined in the “programmatic access” documentation you mention above. I ended up returning the multiple values from the database as a colon-delimited string, saving that string to a hidden item, then used JavaScript to take that value, convert it to a JavaScript array, then use that array to populate the Select2 item – using syntax like this as outlined in the documentation:
$exampleMulti.val([“CA”, “AL”])
Thanx again for your work on this plug-in. It has saved me several times when I needed a concise tool (not a lot of real estate on the page) to perform multi-selection on a very long list.
LikeLiked by 1 person
Hi Nick,
I have need to set the select list to return me all the values that matches partially with the input string that I enter.
so for eg: My select list consists of below values like :
borders california
borders pheonix descr
borders texas state
Now if I enter string in my select list as bord pheonix it should return me borders pheonix descr.
So it should substitute space with something like ‘%bord%pheonix%’ .
Can this be done? I am looking at select2 plugin code. But I am not sure where to make changes. Is it in pl/SQL code?
LikeLike
Hi Nick,
For the above question. I am using select2 plugin V 2.4.3. I am on apex 5.0.3
LikeLike
I released version 3.0.2 of the Select2 APEX plugin. It includes a new Search Logic option: Multi-word Search. This search algorithm should fit your requirements.
LikeLike
hello there! any change to refresh the a select2 field? the standard apex 5 refresh dynamic action does not work… Can i refreshed with some javascript code maybe? or even a pl/sql?
Thnks!
LikeLike
The standard Refresh action in APEX doesn’t work for Select2 page items.
I typically use the Cascading LOV feature to refresh a Select2 page item. Is that an option in your case?
LikeLike
what is the limitation of this select list it can show 5000 records at a time? because i had tried apex select list but it is giving error ( “ORA-06502: PL/SQL: numeric or value error: character string buffer too small” when rendering Select List item in a tabular form) I shall be very thankful if you reply as soon as possible?
LikeLike
I believe that the PL/SQL varchar2 limit (32767) applies for select lists. Thus, the generated HTML for your select list item should not exceed 32767 characters. I’m not 100% sure about this, but it’s clear that there’s some sort of length limitation.
There’s an easy way to avoid this limitation when using the Select2 APEX plugin. Simply enable lazy loading for your Select2 page item. That way, APEX will use an AJAX technique to fetch the LOV data, instead of loading the complete LOV data on page load.
LikeLike
Can I use Select2 on 4.2 tabular form? We have a need to all user to select multiple countries from a select list.
I’ve read several blogs but they seem to talking about apex 5.0, and the instructions are vague.
LikeLike
Hi Drew,
It’s not possible to use the Select2 APEX plugin in a tabular form component. However, you can use the Select2 jQuery plugin itself to transform the tabular form’s select list items into Select2 items. Just download the Select2 library files from the official Select2 website (https://select2.github.io/) and reference these files on your APEX page. You can then transform the select list items using some jQuery code. More information on this technique can be found here: http://rimblas.com/blog/2016/01/using-select2-on-apex-tabular-forms/
Hope this helps,
Nick
LikeLike
Hi Nick Buytaert,
Good Morning,
I have an issues through dynamic action i can’t set a value in select2 plugin item.
if i set lazy loading attribute is yes i can set a value if no i cant set a value to select2 item and my select2 lov value is more than 1000.please suggest me.
Thanks in advance
LikeLike
You can use the standard “Set Item” dynamic action when lazy loading is disabled.
If you enabled lazy loading, you’ll have to use some jQuery code to set the Select2 item’s value. Here’s an example:
The “id” value is your LOV’s return value, while the “text” value defines the display value.
Hope this helps,
Nick
LikeLike
Hi Nick,
One of the fields that is set as Select 2 Item is rendering with narrow width( 1 character wide). People can not see what they are inputting. Could you please suggest me how I can increase the visible width of the item.
Thanks,
Srinivas
LikeLike
Hello Srinivas,
Enter a value for the “Width” page item property. You can fill in something like 400px or 100%. That should increase the width of your Select2 item.
Nick
LikeLike