<div class="mdl-textfield mdl-js-textfield typeahead-widget {{field.className}}"
     [class.is-dirty]="value"
     [class.typeahead-widget__invalid]="!field.isValid" id="typehead-div" *ngIf="field.isVisible">
    <label [attr.for]="field.id">{{field.name}}</label>
    <input class="mdl-textfield__input"
           type="text"
           [attr.id]="field.id"
           [(ngModel)]="value"
           (keyup)="onKeyUp($event)"
           (blur)="onBlur()"
           [disabled]="field.readOnly"
           placeholder="{{field.placeholder}}">
    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
</div>
<div class="typeahead-autocomplete mdl-shadow--2dp" *ngIf="options.length > 0 && popupVisible">
    <ul>
        <li *ngFor="let item of options"
            [attr.id]="field.id +'-'+item.id"
            class="mdl-menu__item"
            (click)="onItemClick(item, $event)">
            {{item.name}}
        </li>
    </ul>
</div>
