搜索select有3个或更少选项时如何防止羊驼产生射电场

Question

I have a div and a following javascript:

let usersNotContributingIds = [ 19, 20, 21 ];
let usersNotContributingNames = [ "Flavius K.", "Pogchamp", "Lazy Gopnik" ];
let contributorToBeAddedId; // the value that will be used for further actions
$("#alpaca-search-contributing-users").alpaca({
            data: null,
            schema: {
                type: "object",
                enum: usersNotContributingIds,
            },
            options: {
                name: "pls",
                label: 'Contributor Fullname',
                optionLabels: usersNotContributingNames,
                helper: "Select user sou want to add as a contributor",
                id: "select2-search",
                focus: false,
                events: {
                    change: function() {
                        console.log(this.getValue().value);
                        contributorToBeAddedId = this.getValue().value
                    },
                    focus: function() {
                        console.log(this.name);
                    },
                    blur: function() {
                        console.log(this.name + ": blur");
                    },
                    ready: function() {
                        console.log(this.name);
                    }
                },

            },

            postRender: function(control) {
                $('#select2-search').select2();
            }
        });

Obviously, I want to get the newly set value, or anyhow access the selected value and use it. For example with AJAX and a button. The problem is, that when I have 3 or less options, Alpaca render the field not as a search, but as a radio-something and the this.getValue() is null.

Is there a way to force Alpaca to NOT USE THE RADIO BUTTONS? I dont want to use them, even if I had only 1 option. Documentation just promtly states, that if there are 3 or less options, it will generate radio buttons instead of select, but it says nothing about the fact, that it breaks everything and that I would not be able to retrieve the value the same way as with select field.

If I am doing something inefficiently or wrong, please tell me, I am new with Alpaca and I just want a neat select dropdown with search, that I can use to pick users from a list with any length. Also, I would like the "null" or "none" option to not be there.

Answer 1

To have your select component rendered you should use the option type and set it to "select" .

The issue with the value is because you're using it wrong, to get the value in alpaca you only do this.getValue() and there's no need to add .value .

FYI: If you see the error " This field should have one of the values in Flavius K., Lazy Gopnik, Pogchamp. Current value is: 19 " you should update your enum array to have strings instead of ints let usersNotContributingIds = [ "19", "20", "21" ]; .

Here's a working fiddle for this.