Select Container - ZUI Documentation

Summary

The select container is a smart select element. It's possible to search data quickly or to tokenize data.

Name	Description	Default Value
`data-zui-addable`	By setting the `data-zui-addable` attribute, the user is able to add new items to the select box. No values have been documented for this attribute.
`data-zui-no-matches`	By setting the `data-zui-no-matches` you can translate the "no matches" text. No values have been documented for this attribute.
`data-zui-no-matches`	When the `multiple` attribute is set, the select box turns into a tokenized select container. No values have been documented for this attribute.

Name	Description
`zui-select-container`	The `zui-select-container` class turns a select box into a smart select container.

Example

Markup

<form action="" method="post">
    <p>
        <select>
            <option value=""></option>
            <option value="1">These</option>
            <option value="2">Are</option>
            <option value="3">Items</option>
            <option value="4">In</option>
            <option value="5">A</option>
            <option value="6">Select</option>
            <option value="7">Box</option>
        </select>
    </p>
</form>

<form action="" method="post">
    <p>
        <select class="zui-select-container" id="default-container" data-zui-addable>
            <option value="1">These</option>
            <option value="2">Are</option>
            <option value="3">Items</option>
            <option value="4">In</option>
            <option value="5">A</option>
            <option value="6">Select</option>
            <option value="7">Box</option>
        </select>
    </p>
</form>

<form action="" method="post">
    <p>
        <select class="zui-select-container" multiple>
            <option value=""></option>
            <option value="1">These</option>
            <option value="2">Are</option>
            <option value="3">Items</option>
            <option value="4">In</option>
            <option value="5">A</option>
            <option value="6">Select</option>
            <option value="7">Box</option>
        </select>
    </p>
</form>