<form novalidate [formGroup]="formGroup">
  <div class="sky-margin-stacked-lg">
    The following field:<br />
    <ul>
      <li>utilizes a custom search result template,</li>
      <li>searches against the name and description properties,</li>
      <li>limits the search results to two,</li>
      <li>runs the search if the query is at least three characters long,</li>
      <li>and fires an event when a selection is made.</li>
    </ul>
  </div>

  <div class="sky-margin-stacked-lg">
    <label class="sky-control-label" [for]="planetInput.id">
      Farthest planet from the sun
    </label>
    <sky-autocomplete
      [data]="planets"
      [propertiesToSearch]="['name', 'description']"
      [searchResultsLimit]="2"
      [searchResultTemplate]="planetSearchResultTemplate"
      [searchTextMinimumCharacters]="3"
      (selectionChange)="onPlanetSelection($event)"
    >
      <input
        #planetInput
        formControlName="farthestPlanet"
        skyAutocomplete
        skyId
        type="text"
      />
    </sky-autocomplete>
  </div>
  <p class="sky-font-emphasized">Form model:</p>
  <pre>{{ formGroup.value | json }}</pre>
</form>

<ng-template #planetSearchResultTemplate let-item="item">
  <strong>
    {{ item.name }}
  </strong>
  <br />
  {{ item.description }}
</ng-template>
