D-Net

              <span id="search-icon-mobile" uk-search-icon></span>

                [placeholder]="'Search for a country...'"

            <div class="uk-navbar-center">

              <div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry">

                <span id="search-icon" uk-search-icon></span>

                <ng-autocomplete

                  [data]="countriesCollection"

                  [searchKeyword]="keyword"

                  [placeholder]="'Search for a country...'"

                  (selected)='selectCountryFromAutocompleteEvent($event)'

                  (inputChanged)='onChangeSearch($event)'

                  (inputFocused)='onFocused($event)'

                  historyIdentifier="countriesCollection"

                  [itemTemplate]="itemTemplate"

                  [notFoundTemplate]="notFoundTemplate">

                </ng-autocomplete>

                <ng-template #itemTemplate let-item>

                  <a [innerHTML]="item.name"></a>

                </ng-template>

                <ng-template #notFoundTemplate let-notFound>

                  <div [innerHTML]="notFound"></div>

                </ng-template>

              </div>

              <!--<div class="uk-autocomplete uk-form uk-search uk-search-default searchForCountry" data-uk-autocomplete="{source:'https://getuikit.com/v2/tests/components/_autocomplete.json'}">-->

              <!--<span uk-search-icon></span>-->

              <!--<input class="uk-search-input" type="search" placeholder="Search for a country...">-->

              <!--&lt;!&ndash;<input type="text">&ndash;&gt;-->

              <!--</div>-->

            </div>