This component provides an enhanced version of the default select input.

Single

Renders a single value select with markup identical to standard html select elements. Adds a search box by default, which is hidden if the number of available options falls below the specified search threshold.

HTML

<div class="t-content" ng-controller="invSelectExampleController" inv-focus-group>
    <ng-form class="c-form c-generalForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="single">Single Select:</label>
                <inv-select ng-model="single" name="single">
                    <inv-option ng-repeat="option in sampleOptions"
                        value="option.value"><span ng-bind="option.label"></span></inv-option>
                </inv-select>
            </div>
            <div class="c-fieldset-item">
                <label for="threshold">Threshold (adds search if set to 16 or less, disables search if set to -1):</label>
                <input ng-model="threshold" name="threshold" type="number" min="-1"/>
            </div>
            <div class="c-fieldset-item">
                <label for="singleNoSearch">Search Limited to Threshold:</label>
                <inv-select ng-model="singleNoSearch" name="singleNoSearch" search-threshold="threshold">
                    <inv-option ng-repeat="option in sampleOptions"
                        value="option.value"><span ng-bind="option.label"></span></inv-option>
                </inv-select>
            </div>
            <div class="c-fieldset-item">
                <label for="noResults">Custom No Results Placeholder:</label>
                <inv-select ng-model="noResults"
                    name="noResults"
                    no-results="custom"
                    locale-keys="customLocaleKeys">
                    <inv-option ng-repeat="option in sampleOptions"
                        value="option.value"><span ng-bind="option.label"></span></inv-option>
                </inv-select>
            </div>
        </fieldset>
    </ng-form>
</div>

Multi

Renders a multi value select with markup identical to standard html select elements. Selected items display as pills, and search is always enabled.

HTML

<div class="t-content" ng-controller="invSelectExampleController" inv-focus-group>
    <ng-form class="c-form c-generalForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="multi">Multi Select:</label>
                <inv-select
                    ng-model="multi"
                    id="multi"
                    name="multi"
                    multiple>
                    <inv-option
                        ng-repeat="option in sampleOptions track by option.value"
                        value="::option.value">
                        <span ng-bind="::option.label"></span>
                    </inv-option>
                </inv-select>
            </div>
            <div class="c-fieldset-item">
                <label for="multiSelected">Multi Select:</label>
                <inv-select
                    ng-model="multiSelected"
                    name="multiSelected"
                    id="multiSelected"
                    multiple>
                    <inv-option
                        ng-repeat="option in sampleOptions track by option.value"
                        value="::option.value">
                        <span ng-bind="::option.label"></span>
                    </inv-option>
                </inv-select>
            </div>
            <div class="c-fieldset-item">
                <label for="disabledMultiSelected">Disabled Multi Select:</label>
                <inv-select
                    ng-model="multiSelected"
                    id="disabledMultiSelected"
                    ng-disabled="true"
                    multiple>
                    <inv-option
                        ng-repeat="option in sampleOptions track by option.value"
                        value="::option.value">
                        <span ng-bind="::option.label"></span>
                    </inv-option>
                </inv-select>
            </div>
        </fieldset>
    </ng-form>
</div>

Add Options

Option to enable adding new options on the fly. A callback from the parent controller must return 'true' to enable addition of the current search value. All added values return as an object with a 'created' property.

HTML

<div class="t-content" ng-controller="invSelectExampleController" inv-focus-group>
    <ng-form class="c-form c-generalForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="additions">Enable Option Additions:</label>
                <inv-select 
                    allow-create="allowCreate(searchValue)"
                    name="additions"
                    ng-model="additions">
                    <inv-option ng-repeat="option in sampleOptions"
                        value="option.value"><span ng-bind="option.label"></span></inv-option>
                </inv-select>
            </div>
            <div class="c-fieldset-item">
                <label for="multiAdditions">Enable Multi-Option Additions:</label>
                <inv-select 
                    allow-create="allowCreate(searchValue)"
                    multiple
                    name="multiAdditions"
                    ng-model="multiAdditions">
                    <inv-option ng-repeat="option in sampleOptions"
                        value="option.value"><span ng-bind="option.label"></span></inv-option>
                </inv-select>
            </div>
            <div class="c-fieldset-item">
                <label for="additionPlaceholders">Custom Add/Added Placeholders:</label>
                <inv-select 
                    allow-create="allowCreate(searchValue)"
                    multiple
                    name="additionPlaceholders"
                    ng-model="additionPlaceholders"
                    locale-keys="additionLocaleKeys">
                    <inv-option ng-repeat="option in sampleOptions"
                        value="option.value"><span ng-bind="option.label"></span></inv-option>
                </inv-select>
            </div>
        </fieldset>
    </ng-form>
</div>