I need to make a custom field that can select from a list made up by a custom post type.
I’ve been able to do this with a basic select dropdown, but now it looks like I’ll need to make it a multi-select.
Does anyone know the HTML structure and what JavaScript I need to make the field like the select2.js that is built in with ACF, and how to save the multiple selections?
I need to build out the select HTML because I’m using a loop get the options.
I couldn’t get my field to match ACF exactly but I did make use of select2.js multiselect by adding multiple="multiple" to my <select> element and calling the select2() function on the element after giving it a unique id.
jQuery(#example).select2()
I also added data-placeholder="Select" to display placeholder text, and added a CSS rule to ensure the field went full width. Select2 creates another element that you need to apply the style to, but the id of it should be predictable based on the name of the original select element
#s2id_example { width: 100%; }
ACF produces a handful of other attributes (data-ui, data-multiple, data-allow_null) for it’s own native multiselect elements, but I haven’t yet figured out what they do and they didn’t seem to make a difference on my own custom select element.
