Select2 with custom matcher function

[ericfkw]

Hello,

We are well using PortoAdmin to implement an internal system, and calling ‘data-plugin-selectTwo’ in <select> to make it with select2 plugin.

Now we would like to add a custom Select2 function for searching, e.g. to use the following json as data, and make “description” can be searchable too.

{ id : 1, text : ‘Item 1’, description : ‘Long text description for item 1’ },
{ id : 2, text : ‘Item 2’, description : ‘Long text description for item 2’ },
{ id : 3, text : ‘Item 3’, description : ‘Long text description for item 3’ },

Checked Select2 website there is a “matcher” function for that, but we have no clue to how to implement with PortoAdmin

Kindly advise. Thanks.

---

[Support]

Hello, thanks for your purchase.

When we need a more customizable method to initialize a plugin, the best way is manually instead of trough data-plugin-selectTwo.

Please follow the steps below:

1) Change the HTML of select to:

<select class="my-custom-select2 form-control populate">......</select>

* Note I removed the data-plugin-selectTwo attribute.

2) Initialize the Select2 manually by adding the code below at “js/custom.js”:

$('.my-custom-select2').select2();

* You mentioned ajax returning JSON and custom function. Probably the best code is the one on this link:
https://select2.org/data-sources/ajax#additional-examples

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[ericfkw]

Hello, tried but it fire following error

Uncaught TypeError: $(…).select2 is not a function

Do I need to refer the select2 js from cdn once again? Can I use the same library as portoadmin using?

Thanks

---

[Support]

Hello,

You can refer the select2 that comes bundled with Porto Admin.

The mentioned error means that select2 lib is not included on the page. Check if you have the script below added on footer of page:

<script src="vendor/select2/js/select2.js"></script>

* Make sure you add the script above before the js/custom.js script.

Also make sure to add the Select2 stylesheets on head of document:

<link rel="stylesheet" href="vendor/select2/css/select2.css" /> 
<link rel="stylesheet" href="vendor/select2-bootstrap-theme/select2-bootstrap.min.css" />

If even so the problem still persists, please send us a online test link with your website, so we can check what’s happening.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts