Advanced Select
Overview
The Advanced Select component enhances the standard HTML select element with additional features such as searchable options, multi-select capability, custom styling, and improved user experience. It maintains accessibility while providing a more interactive and visually appealing dropdown interface.
Basic Usage
To create an advanced select, add the .px-select
class to a standard HTML select element and manually initialize it:
<select class="px-select form-control">
<option value="">Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
// Initialize the select component
Phenix('select.px-select').select();
The component will transform the standard select into an enhanced version with custom styling and functionality.
Features
Searchable Options
For selects with many options, users can search to quickly find the option they need:
<select class="px-select form-control" data-search="true">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<!-- More options... -->
</select>
Multi-Select
Enable multi-select functionality to allow users to select multiple options:
<select class="px-select form-control" multiple>
<option value="">Select skills</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
Option Groups
Organize options into logical groups for better organization:
<select class="px-select form-control">
<option value="">Select a programming language</option>
<optgroup label="Frontend">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Backend">
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="ruby">Ruby</option>
</optgroup>
</select>
Disabled Options
Disable specific options that are not currently selectable:
<select class="px-select form-control">
<option value="">Select an option</option>
<option value="option1">Option 1</option>
<option value="option2" disabled>Option 2 (Not Available)</option>
<option value="option3">Option 3</option>
</select>
Customization
Custom Placeholder
Set a custom placeholder text:
<select class="px-select form-control" data-placeholder="Choose an option...">
<option value=""></option> <!-- Empty option for placeholder -->
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
Custom Styling
The Advanced Select component inherits styling from the form-control class and can be customized with size modifiers:
<!-- Small size -->
<select class="px-select form-control small">
<!-- Options... -->
</select>
<!-- Large size -->
<select class="px-select form-control large">
<!-- Options... -->
</select>
Images in Options
Add images to options for a more visual selection experience:
<select class="px-select form-control">
<option value="">Select a country</option>
<option value="us" data-image="/path/to/us-flag.png">United States</option>
<option value="ca" data-image="/path/to/ca-flag.png">Canada</option>
<option value="uk" data-image="/path/to/uk-flag.png">United Kingdom</option>
</select>
JavaScript API
The Advanced Select component must be manually initialized. It is not automatically initialized by the utilities function.
Initialization
// Basic initialization
Phenix('select.px-select').select();
// With options
Phenix('select.px-select').select({
max: 5, // Maximum number of selectable items (for multiple select)
search: true, // Enable search functionality
multiple: true, // Enable multiple selection
placeholder: 'Select...', // Custom placeholder text
searchPlaceholder: 'Search...' // Custom search input placeholder
});
// Rebuild a select after dynamically changing options
Phenix(selectElement).rebuildSelect();
Available Options
Option | Type | Default | Description |
---|---|---|---|
max | Number | undefined | Maximum number of items that can be selected in multiple mode |
search | Boolean | false | Enable search functionality within options |
multiple | Boolean | false | Enable multiple selection mode |
placeholder | String | undefined | Custom placeholder text |
searchPlaceholder | String | 'Search...' | Custom placeholder for the search input |
Events
The Advanced Select component maintains the standard select events:
// Listen for change events
Phenix('select.px-select').on('change', (event) => {
console.log('Selected value:', event.target.value);
});
Accessibility
The Advanced Select component maintains accessibility features:
- Keyboard navigation (Tab, Enter, Space, Arrow keys)
- ARIA attributes for screen readers
- Focus states for keyboard users
Browser Compatibility
The Advanced Select component is compatible with all modern browsers that support JavaScript ES6 features.