Select3 examples

Showcase of options using examples

closeOnSelect

minimumInputLength

maximumSelectedOptions

placeholder

For single selects: First option must have empty value attribute and no text content set. You can also specify a label attribute on the first(empty) option as the placeholder, instead of specifying it in the javascript options object.

searchNoResults

formatOptionsFunction

HTML

<label for="formatOptionsFunctionTest">formatOptionsFunction:</label>
<select id="formatOptionsFunctionTest">
    <option data-img-src="test/cart.png" selected="selected">Option 1</option>
    <option data-img-src="test/globe.png">Option 2</option>
    <option data-img-src="test/search.png">Option 3</option>
    <option data-img-src="test/tree.png">Option 4</option>
    <option data-img-src="test/user.png">Option 5</option>
</select>

Javascript

document.getElementById('formatOptionsFunctionTest').Select3({
    formatOptionsFunction: function(option) {
        if (!option.value) {
            return option.textContent;
        }

        let content = document.createElement('span')
        let image = document.createElement('img')

        image.src = option.dataset.imgSrc
        image.alt = option.textContent
        content.append(image)
        content.append(option.textContent)

        return content;
    }
})