extend the drop down menu element

Hi! I want to extend the functionality in the drop down menu element. I use such element to let a user select a user role when registering a new user account. The list of available user roles (organisations) will extend to more than 20 elements during the next months. I’d very much like a more modern look of the drop down menu, making it possible to filter/search.

I guess select2 library is in use already in the pluging, and extending the functionality should be quite easy. I guess something like replacing:

<select id="schoolDropdown"> <option value="">Velg skolen du er ansatt ved</option> <option value="Lillesund">Lillesund</option> <option value="Rossabø">Rossabø</option> <!-- flere skoler --> </select>

with something like:

<script> $(document).ready(function() { $('#schoolDropdown').select2({ placeholder: "Søk etter skole", allowClear: true }); }); </script>

I need help to find where I can add this, or even better if this can be implemented as a function out of the box?

The page I need help with: [log in to see the link]