Add Combobox With Select2

#1 · February 13, 2024, 7:23 am

Hello everyone,

I'm looking for guidance on integrating a ComboBox with Select2 in VisualNEO Web. If possible, could you share examples using array or JSON data as the data source?

Thanks in advance!

#2 · February 13, 2024, 11:04 am

Hi @suyonob, can you share please a sample so we can understand you better?
Thank you!

#3 · February 13, 2024, 5:32 pm

Like url below

https://select2.org/getting-started/basic-usage

@luishp

If any Way combine like External library please point me how to use it into visualneoweb

Thank you

#4 · February 13, 2024, 10:33 pm

@suyonob, I would like to make a plugin for this library.
Meanwhile you can use it following this instructions:

Include the appropiated libraries into Project > Properties > Advanced > Body:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Add a Container and a Combobox object inside the Container.
Be sure your Container has Style > overflow-y set to visible.
Include this code into the page-enter event:
```
BeginJS
 $('#Combobox1').select2();
EndJS
```
Done!

Please take a look at the attached sample app.

Uploaded files:

You need to login to have access to uploads.

suyonob has reacted to this post.

#5 · February 14, 2024, 3:39 am

Hi @luishp,

I'm so grateful for your help in improving the Select2 feature. Your suggestions on optimizing the dropdown performance have made a real difference!

I tested the improvements you suggested, and I'm happy to report that the feature is now much enjoyable to develop.

btw there are 2 classes :

js-example-basic-single and js-example-basic-multiple,

How to choose between them in visualneo web ?, please point me to direction.

Please also Multi-select Boxes (Pillbox) plugin please.

Thank you again !

Uploaded files:

You need to login to have access to uploads.

luishp has reacted to this post.

#6 · February 14, 2024, 1:54 pm

btw there are 2 classes :

js-example-basic-single and js-example-basic-multiple

@suyonob you can choose your own classes. Those are just examples. They are used as selectors.
For example this code will initialize any ComboBox with a class named myclass:

BeginJS
 $('.myclass').select2();
EndJS

Note that you should refer to the Select2 documentation for initialization options.
For example use this code to allow selecting multiple values:

BeginJS
$(".myclass").select2({
  multiple: true
});
EndJS

Regards.

suyonob has reacted to this post.

#7 · February 14, 2024, 2:13 pm

Great

Thank you @luishp for your pointer

#8 · May 30, 2024, 9:35 am

Good morning,

in my project the search box appears in the top left vertex, making the comboBox I had previously placed disappear.

Tips

#9 · December 10, 2024, 7:16 am

Hello @luishp,

I’m encountering an issue when trying to populate or retrieve a value from a multiselect field. Could you please guide me on how to resolve this?

Thank you! 😊

Uploaded files:

You need to login to have access to uploads.

#10 · December 10, 2024, 7:15 pm

@suyonob, please note that Select2 library is currently not part of VisualNEO Web.
Anyway, please check the attached sample app.
Just click the button to get the comma separated values into a string variable.

Uploaded files:

You need to login to have access to uploads.

#11 · December 11, 2024, 1:47 pm

Thank you, @luishp.

You're absolutely correct that the Select2 library from https://select2.org is not yet integrated into VisualNeoWeb. However, I do need this input option for my project. Hopefully, future versions of VisualNeoWeb will include support for Select2, both for single and multiple selection options.

I have opened the file you sent, but unfortunately, the script inside the "Get Values Into list1" button is empty.

#12 · December 11, 2024, 3:12 pm

Hello @luishp,

I have successfully implemented the solution using HTML within a container along with the accompanying JavaScript.

I’m attaching the implementation here for your reference.

However, if there's an alternative option that doesn't require HTML in the container and JavaScript as before, it would be even more helpful.

Thank you!

Uploaded files:

You need to login to have access to uploads.

#13 · December 11, 2024, 6:27 pm

@suyonob I have updated the file in my previous post. Please check.
No time to check yours so not sure if it's different :)

suyonob has reacted to this post.

#14 · December 20, 2024, 2:22 pm

Hello Mr @luishp

please let me know how to perform select2 on Dialogs ?

normally if perform at Pages there is using

BeginJS
$('#Combobox6').select2();
EndJS

thanks

#15 · December 20, 2024, 7:47 pm

@suyonob just be sure the Dialog has been loaded:

Wait 300
BeginJS
$('#Combobox6').select2();
EndJS
EndWait

#16 · December 23, 2024, 4:27 am

Thank you Mr luishp

Add Combobox With Select2 - Forum

Add Combobox With Select2