How to add a select2 field to cms

Development
1

I want to change prerequisite courses from a normal single value drop down list into a multi value select2 field.

I tried add multiple="multiple" to this line which turned the drop down into multi value list. But with more than 200 courses in the production server the list would be way too long.

So how can/should this be accomplished? I looked at the Django ways provided in the repo but it doesn’t look like Openedx’s frontend js files are compatible with those.

I tried to add the select2.js into settings.html or cms/commom/env.py but got this very long error.

Uncaught Error: Mismatched anonymous define() module: function (jQuery) {
  // This is needed so we can catch the AMD loader configuration and use it
  // The inner file should be wrapped (by `banner.start.js`) in a function that
...
https://requirejs.org/docs/errors.html#mismatch
    at makeError (require.js:168:17)
    at intakeDefines (require.js:1254:36)
    at Object.localRequire [as require] (require.js:1446:21)
    at requirejs (require.js:1797:24)
    at course-v1:edX+M12+1T2024:1221:7
makeError @ require.js:168
intakeDefines @ require.js:1254
localRequire @ require.js:1446
requirejs @ require.js:1797
(anonymous) @ course-v1:edX+M12+1T2024:1221

I have to shorten the stacktrace because it’s really long but the start is from the select2.js file. Using the select2.full.js instead give similar error.