Autocomplete

Default EMPTY Model

Autocomplete input field no default value

Selected Item:

HTML

<div class="t-content c-form" style="height: 200px;" ng-controller="autocompleteExampleController as $ctrl">
    <inv-autocomplete placeholder="Start typing ..." debug="false" name="sample"
                      ng-model="$ctrl.noItem"
                      show-icon-for-options="true"
                      options="$ctrl.options"></inv-autocomplete>
    <div>Selected Item: <pre ng-bind="$ctrl.noItem | json"></pre></div>
</div>

Default non-EMPTY Model

Autocomplete input field with a default value

Selected Item:

HTML

<div class="t-content c-form" style="height: 200px;" ng-controller="autocompleteExampleController as $ctrl">
    <inv-autocomplete placeholder="Start typing ..." debug="false" name="sample"
                      ng-model="$ctrl.item"
                      show-icon-for-options="true"
                      options="$ctrl.options"></inv-autocomplete>
    <div>Selected Item: <pre ng-bind="$ctrl.item | json"></pre></div>
</div>

E-mail regex validation

Autocomplete input field with a default value & email validation pattern

Selected Item:

HTML

<div class="t-content c-form" style="height: 200px;" ng-controller="autocompleteExampleController as $ctrl">
    <inv-autocomplete placeholder="Start typing ..." debug="false" name="email"
                      ng-model="$ctrl.emailItem"
                      show-icon-for-options="true"
                      options="$ctrl.options"
                      track-by-label="true"
                      validation-regex="$ctrl.REGEX_EMAIL"></inv-autocomplete>
    <div>Selected Item: <pre ng-bind="$ctrl.emailItem | json"></pre></div>
</div>

Required validation

Autocomplete input field with a required validation

Selected Item:

HTML

<div class="t-content c-form" style="height: 200px;" ng-controller="autocompleteExampleController as $ctrl">
    <inv-autocomplete placeholder="Start typing ..." debug="false" name="email"
                      ng-model="$ctrl.noItem"
                      show-icon-for-options="true"
                      is-required="true"
                      options="$ctrl.options"
                      track-by-label="true"></inv-autocomplete>
    <div>Selected Item: <pre ng-bind="$ctrl.noItem | json"></pre></div>
</div>

Highlight Suggestion(s) MethodsHighlight suggestions that begins with the keyword or contains the keyword
    Suggestion Containing the Keyword will be highlighted
    
    


    Suggestion(s) Beginning With Keyword will be highlighted
    

                                    HTML
                                    <div class="t-content c-form" style="height: 200px;" ng-controller="autocompleteExampleController as $ctrl">
    <label for="contains-autocomplete">Suggestion Containing the Keyword will be highlighted</label>
    <inv-autocomplete placeholder="Start typing ..." debug="false" name="contains-autocomplete"
                      ng-model="$ctrl.containsItem"
                      show-icon-for-options="true"
                      options="$ctrl.options"
                      track-by-label="true"
                      highlight-method="contains"></inv-autocomplete>
    <br/><br/>
    <label for="begins-with-autocomplete">Suggestion(s) Beginning With Keyword will be highlighted</label>
    <inv-autocomplete placeholder="Start typing ..." debug="false" name="begins-with-autocomplete"
                      ng-model="$ctrl.beginsWithItem"
                      show-icon-for-options="true"
                      options="$ctrl.options2"
                      track-by-label="true"
                      highlight-method="beginsWith"></inv-autocomplete>
</div>


                                