Beauty Select Plugin

To manage selects with search functionality.

Warning: when using the plugin for the select, you must get the selected value through JavaScript window.beautySelect.getValue('selectID'), otherwise it won't save on form submit!

I haven't developed the required validation yet

1. Simple Select

<?php echo Get::themePlugin('BeautySelect', [
        'id'=>'simpleSelect', 
        'options'=>['1'=>'One', '2' => 'Two'], 
        'label'=>'Simple TomSelect',
        'value' => 2
    ] ); ?>

2. Group Select

<?php echo Get::themePlugin('BeautySelect',['id'=>'groupSelect', 'floating'=>false, 'options'=>['Fruit' => ['fruit1'=>'Apple', 'fruit2' => 'Banana', 'fruit3' => 'Orange'], 'Vegetables' => ['veg1'=>'Carrot', 'veg2' => 'Broccoli', 'veg3' => 'Spinach'] ] ] ); ?>

3. isMultiple

<?php echo 
Get::themePlugin('BeautySelect', ['id'=>'state', 'label'=>'multiple select', 'options'=>['franch' => 'franch', 'spain' => 'spain', 'italy' => 'italy'], 'isMultiple'=>true]); ?>

4. showToggleButton

<?php echo Get::themePlugin('BeautySelect',  ['id'=>'state', 'label'=>'showToggleButton select',  'options'=>['franch' => 'franch', 'spain' => 'spain', 'italy' => 'italy'],  'showToggleButton'=>true]); ?>

5. getValue

const displayValues = () => {
    const showValuesDiv = document.getElementById('showvalues');
    showValuesDiv.innerHTML = '';
    ['simpleSelect', 'groupSelect', 'state', 'state2'].forEach(id => {
        // Create an element to show the value
        const valueElement = document.createElement('div');
        valueElement.textContent = `${id}: `+window.beautySelect.getValue(id);
        // Add the element to the div
        showValuesDiv.appendChild(valueElement);
    });
};

6. onChange

<?php echo Get::themePlugin('BeautySelect',['id'=>'simpleSelectChange', 'label'=>'onchange select', 'options'=>['1'=>'One', '2' => 'Two']  'onChange'=>'showInDiv(window.beautySelect.getValue("simpleSelectChange"))'] ); ?>

JavaScript Documentation

The beauty-select plugin exposes its functionality through the global window.beautySelect object.

Methods

createSelect(options)

Creates a new select with TomSelect. Accepts a configuration object with the following properties:

Property	Type	Default	Description
containerId	string	required	ID of the container where the select will be created
isMultiple	boolean	false	Enables multiple selection
selectOptions	array	[]	Array of select options
showToggleButton	boolean	false	Shows the button to select/deselect all
floating	boolean	true	Enables floating label
labelText	string	''	Select label text
value	string|array	''	Default value
onChange	function	null	Callback executed when the value changes

Usage example:

window.beautySelect.createSelect({
    containerId: 'mySelectId',
    isMultiple: true,
    selectOptions: [
        { value: '1', text: 'Option 1' },
        { value: '2', text: 'Option 2' }
    ],
    showToggleButton: true,
    floating: true,
    labelText: 'Select an option',
    onChange: (value) => {
        console.log('Selected value:', value);
    }
});

Example with grouped options:

window.beautySelect.createSelect({
    containerId: 'groupedSelect',
    selectOptions: {
        'Group 1': {
            'opt1': 'Option 1',
            'opt2': 'Option 2'
        },
        'Group 2': {
            'opt3': 'Option 3',
            'opt4': 'Option 4'
        }
    },
    value: 'opt1'
    labelText: 'Select an option'
});

getValue(containerId)

Gets the current value of a select.

const value = window.beautySelect.getValue('mySelectId');

setValue(containerId, value)

Sets the value of a select.

// For single select
window.beautySelect.setValue('mySelectId', 'value1');

// For multiple select
window.beautySelect.setValue('mySelectId', ['value1', 'value2']);

updateOptions(containerId, options)

Updates the options of an existing select.

window.beautySelect.updateOptions('mySelectId', [
    { value: 'new1', text: 'New Option 1', group: 'Group 1' },
    { value: 'new2', text: 'New Option 2' }
]);

removeSelect(containerId)

Removes a select and cleans up its instances.

window.beautySelect.removeSelect('mySelectId');

removeAll()

Removes all selects managed by the plugin.

window.beautySelect.removeAll();

Complete Example

// Create select through PHP as shown in previous examples

// Get value
const value = window.beautySelect.getValue('mySelectId');

// Update options
window.beautySelect.updateOptions('mySelectId', [
    { value: 'new1', text: 'New Option', group: 'New Group' }
]);

// Set up change handler
document.getElementById('myButton').onclick = () => {
    const currentValue = window.beautySelect.getValue('mySelectId');
    console.log('Current value:', currentValue);
};