pigallery2/frontend/app/ui/gallery/search/search.gallery.component.html

<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.person" class="oi oi-person"></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-light" type="button"
              [routerLink]="['/search', searchText]">
        <span class="oi oi-magnifying-glass"></span>
      </button>
    </div>
  </div>
</form>