<form novalidate [formGroup]="formGroup">
  <p>
    The following field has a preselected value and utilizes a custom search
    function, as well as a custom template for the search results.
  </p>
  <div class="sky-margin-stacked-lg">
    <label class="sky-control-label" [for]="largestOceanInput.id">
      Largest ocean
    </label>
    <sky-autocomplete
      descriptorProperty="title"
      [data]="oceans"
      [search]="getOceanSearchFunction()"
      [searchResultTemplate]="oceanSearchResultTemplate"
    >
      <input
        #largestOceanInput="skyId"
        formControlName="largestOcean"
        type="text"
        skyAutocomplete
        skyId
      />
    </sky-autocomplete>
  </div>
  <p class="sky-font-emphasized">Form model:</p>
  <pre>{{ formGroup.value | json }}</pre>
</form>

<ng-template #oceanSearchResultTemplate let-item="item">
  <sky-icon icon="long-arrow-right" />
  {{ item.title }} &bull; ID {{ item.id }}
</ng-template>
