<form class="navbar-form" role="search" #SearchForm="ngForm"> <div class="input-group"> <input type="text" class="form-control " i18n-placeholder placeholder="Search" (keyup)="onSearchChange($event)" (blur)="onFocusLost()" (focus)="onFocus()" [(ngModel)]="searchText" #name="ngModel" size="30" ngControl="search" name="srch-term" id="srch-term" autocomplete="off"> <div class="autocomplete-list" *ngIf="autoCompleteItems.length > 0" (mouseover)="setMouseOverAutoComplete(true)" (mouseout)="setMouseOverAutoComplete(false)"> <div class="autocomplete-item" *ngFor="let item of autoCompleteItems"> <a [routerLink]="['/search', item.text, {type: SearchTypes[item.type]}]"> <span [ngSwitch]="item.type"> <span *ngSwitchCase="SearchTypes.photo" class="oi oi-image"></span> <span *ngSwitchCase="SearchTypes.video" class="oi oi-video"></span> <span *ngSwitchCase="SearchTypes.directory" class="oi oi-folder"></span> <span *ngSwitchCase="SearchTypes.keyword" class="oi oi-tag"></span> <span *ngSwitchCase="SearchTypes.position" class="oi oi-map-marker"></span> </span> {{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}} </a> </div> </div> <div class="input-group-btn" style="display: block"> <button class="btn btn-default" type="button" (click)="onSearch()"> <span class="oi oi-magnifying-glass"></span> </button> </div> </div> </form>