YoSelect

YoSelect is a customizable select component that enhances the native HTML select element with features like searching, multiple selection, image support, and the ability to create new options.

Installation

npm install @yohns/yoselect

1. Include the CSS and JS files in your HTML:

<link rel="stylesheet" href="yoSelect.css">
<script src="yoSelect.js"></script>

Basic Usage

<select class="yoSelect">
<option value="">Select an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<script>
const select = new YoSelect(document.querySelector('.yoSelect'));
</script>

Features & Options

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | search | boolean | false | Enables search functionality | | creatable | boolean | false | Allows creating new options | | clearable | boolean | false | Adds ability to clear selection | | searchPlaceholder | string | 'Search...' | Placeholder text for search input | | noResultsPlaceholder | string | 'No results found' | Text shown when no options match search | | addOptionPlaceholder | string | 'Press Enter to add "[term]"' | Text shown when creating new option | | classTag | string | '' | Custom CSS class for selected tags in multiple mode | | placeholder | string | '' | Default placeholder text when no option is selected |

HTML Attributes

You can configure YoSelect using either JavaScript options or data attributes:

<select
class="yoSelect"
data-yo-search="true"
data-yo-clearable="true"
data-yo-creatable="true">

Image Support

Add images to options using the data-yo-img attribute:

<option value="us" data-yo-img="path/to/image.png">United States</option>

Multiple Selection

Enable multiple selection using the multiple attribute:

<select class="yoSelect" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

Searchable Select

Enable search functionality:

<select class="yoSelect" data-yo-search="true">
<!-- options -->
</select>
<!-- or via JavaScript -->
<script>
new YoSelect(element, {
search: true,
searchPlaceholder: 'Custom search placeholder...',
noResultsPlaceholder: 'Custom no results message'
});
</script>

Creatable Options

Allow users to create new options:

<select class="yoSelect" data-yo-creatable="true">
<!-- options -->
</select>
<!-- or via JavaScript -->
<script>
new YoSelect(element, {
creatable: true,
addOptionPlaceholder: 'Press Enter to create "[term]"'
});
</script>

Clearable Selection

Enable clearing of selection:

<select class="yoSelect" data-yo-clearable="true">
<!-- options -->
</select>

Placeholder Text

Set placeholder text in three ways:

1. Using data-placeholder attribute:

<option value="" data-placeholder="Choose an option...">Choose an option...</option>

2. Using JavaScript:

<option value="">Select something...</option>

3. Using configuration:

new YoSelect(element, {
placeholder: 'Please select...'
});

Custom Styling

Add custom classes to tags in multiple selection mode:

new YoSelect(element, {
classTag: 'custom-tag-class'
});

Event Listener

Add an event listener to the select element:

const select = new YoSelect(element);
select.element.addEventListener('change', (event) => {
console.log('Selection changed:', event.target.value);
});

Browser Support

YoSelect is compatible with all modern browsers including:

• Chrome
• Firefox
• Safari
• Edge

Examples

Basic Single Select with Search

<select class="yoSelect" data-yo-search="true">
<option value="">Select a country</option>
<option value="us" data-yo-img="flag-us.png">United States</option>
<option value="uk" data-yo-img="flag-uk.png">United Kingdom</option>
</select>

Multiple Select with Create Option

<select class="yoSelect" multiple data-yo-search="true" data-yo-creatable="true">
<option value="js">JavaScript</option>
<option value="py">Python</option>
</select>

Searchable Tags with Custom Styling

<select class="yoSelect" multiple data-yo-search="true">
<option value="tag1">Tag 1</option>
<option value="tag2">Tag 2</option>
</select>
<script>
new YoSelect(element, {
classTag: 'custom-tag',
searchPlaceholder: 'Search tags...'
});
</script>

License

MIT License