Autocomplete

import { Autocomplete } from 'frontile';

const countries = [
  'Argentina',
  'Australia',
  'Brazil',
  'Canada',
  'Denmark',
  'France',
  'Germany',
  'Japan',
  'Mexico',
  'Netherlands',
  'New Zealand',
  'Portugal',
  'South Korea',
  'Spain',
  'United Kingdom',
  'United States'
];

<template>
  <Autocomplete @placeholder='Search countries' @items={{countries}} />
</template>

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Autocomplete } from 'frontile';

const languages = [
  'Elixir',
  'Go',
  'JavaScript',
  'Python',
  'Ruby',
  'Rust',
  'TypeScript'
];

export default class LanguagePicker extends Component {
  @tracked selectedKey: string | null = null;

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <Autocomplete
      @label='Primary language'
      @placeholder='Search languages'
      @items={{languages}}
      @selectedKey={{this.selectedKey}}
      @onSelectionChange={{this.onSelectionChange}}
    />
    <p class='mt-4'>Selected: {{if this.selectedKey this.selectedKey 'none'}}</p>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Autocomplete } from 'frontile';

interface City {
  key: string;
  label: string;
}

const cities: City[] = [
  { key: 'amsterdam', label: 'Amsterdam' },
  { key: 'barcelona', label: 'Barcelona' },
  { key: 'berlin', label: 'Berlin' },
  { key: 'buenos-aires', label: 'Buenos Aires' },
  { key: 'lisbon', label: 'Lisbon' },
  { key: 'london', label: 'London' },
  { key: 'melbourne', label: 'Melbourne' },
  { key: 'mexico-city', label: 'Mexico City' },
  { key: 'new-york', label: 'New York' },
  { key: 'sao-paulo', label: 'São Paulo' },
  { key: 'seoul', label: 'Seoul' },
  { key: 'tokyo', label: 'Tokyo' }
];

// Stand-in for a real API call, e.g. fetch(`/api/cities?q=${query}`)
const searchCities = (query: string): Promise<City[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(
        cities.filter((city) =>
          city.label.toLowerCase().includes(query.toLowerCase())
        )
      );
    }, 600);
  });
};

export default class CitySearch extends Component {
  @tracked selectedKey: string | null = null;

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <Autocomplete
      @label='Destination'
      @placeholder='Search cities'
      @searchMessage='Type to search for a city...'
      @onSearch={{searchCities}}
      @selectedKey={{this.selectedKey}}
      @onSelectionChange={{this.onSelectionChange}}
    >
      <:emptyContent>No cities match your search.</:emptyContent>
    </Autocomplete>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Autocomplete } from 'frontile';

const allTimezones = [
  'America/Chicago',
  'America/Denver',
  'America/Los_Angeles',
  'America/New_York',
  'Asia/Seoul',
  'Asia/Tokyo',
  'Australia/Sydney',
  'Europe/Berlin',
  'Europe/Lisbon',
  'Europe/London'
];

export default class TimezonePicker extends Component {
  @tracked items = allTimezones;

  onInputChange = (value: string) => {
    // Replace with your own request/filter logic
    this.items = allTimezones.filter((tz) =>
      tz.toLowerCase().includes(value.toLowerCase())
    );
  };

  <template>
    <Autocomplete
      @label='Time zone'
      @placeholder='Search time zones'
      @items={{this.items}}
      @disableFiltering={{true}}
      @onInputChange={{this.onInputChange}}
    />
  </template>
}

import { Autocomplete } from 'frontile';

const fruits = ['Apple', 'Apricot', 'Banana', 'Cherry', 'Grape', 'Pineapple'];

const startsWith = (itemValue: string, inputValue: string) =>
  itemValue.toLowerCase().startsWith(inputValue.toLowerCase());

<template>
  <Autocomplete
    @placeholder="Try typing 'ap'"
    @items={{fruits}}
    @filter={{startsWith}}
  />
</template>

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Autocomplete } from 'frontile';

const teammates = [
  { key: 'ana', label: 'Ana Souza', role: 'Design' },
  { key: 'devon', label: 'Devon Lane', role: 'Engineering' },
  { key: 'kim', label: 'Kim Park', role: 'Product' },
  { key: 'marta', label: 'Marta Silva', role: 'Engineering' },
  { key: 'ravi', label: 'Ravi Patel', role: 'Support' }
];

export default class AssigneePicker extends Component {
  @tracked selectedKey: string | null = null;

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <Autocomplete
      @label='Assignee'
      @placeholder='Search teammates'
      @items={{teammates}}
      @selectedKey={{this.selectedKey}}
      @onSelectionChange={{this.onSelectionChange}}
    >
      <:item as |l|>
        <l.Item @key={{l.key}} @description={{l.item.role}}>
          {{l.label}}
        </l.Item>
      </:item>
    </Autocomplete>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Autocomplete } from 'frontile';

const commonRoles = ['Admin', 'Editor', 'Viewer'];

export default class RoleInput extends Component {
  @tracked value = '';

  onInputChange = (value: string) => {
    this.value = value;
  };

  <template>
    <Autocomplete
      @label='Role'
      @description='Pick a suggestion or type your own'
      @items={{commonRoles}}
      @allowsCustomValue={{true}}
      @onInputChange={{this.onInputChange}}
    />
    <p class='mt-4'>Value: {{this.value}}</p>
  </template>
}

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { Autocomplete } from 'frontile';

const browsers = ['Chrome', 'Edge', 'Firefox', 'Safari'];

export default class BrowserPicker extends Component {
  @tracked selectedKey: string | null = 'Firefox';

  onSelectionChange = (key: string | null) => {
    this.selectedKey = key;
  };

  <template>
    <Autocomplete
      @label='Browser'
      @items={{browsers}}
      @isClearable={{true}}
      @selectedKey={{this.selectedKey}}
      @onSelectionChange={{this.onSelectionChange}}
    />
  </template>
}

import { Autocomplete } from 'frontile';
import { array } from '@ember/helper';

const plans = ['Free', 'Pro', 'Enterprise'];

<template>
  <div class='flex flex-col gap-4'>
    <Autocomplete @inputSize='sm' @placeholder='Small' @items={{plans}} />
    <Autocomplete @inputSize='md' @placeholder='Medium' @items={{plans}} />
    <Autocomplete @inputSize='lg' @placeholder='Large' @items={{plans}} />
    <Autocomplete
      @label='Plan'
      @isRequired={{true}}
      @isInvalid={{true}}
      @errors={{array 'Choose a plan to continue'}}
      @items={{plans}}
    />
  </div>
</template>