Auto Complete

<sl-auto-complete> | SlAutoComplete
Since 2.0 experimental

Auto Complete Component

<sl-auto-complete></sl-auto-complete>

Examples

Sizes Small | Medium | Large 

<div style="display: flex; flex-flow: column; gap: 15px">
  <sl-auto-complete size="small"></sl-auto-complete>
  <sl-auto-complete></sl-auto-complete>
  <sl-auto-complete size="large"></sl-auto-complete>
</div>

Mocked Backend filtering with multi select 

<sl-auto-complete multi-select backend-filter id="auto-complete-backend"></sl-auto-complete>

<script type="module">

  const autoCompleteBE = document.getElementById('auto-complete-backend');

  autoCompleteBE.label = 'Search the Backend'

  async function fetchAutoCompleteData() {
    try {
      const response = await fetch('/assets/data/auto-complete.json');
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error fetching auto-complete data:', error);
      return null;
    }
  }

  autoCompleteBE.addEventListener('search-string', (e) => {
    console.log('Typed value: ', e.detail)

    fetchAutoCompleteData().then(data => {
      if (data) {
        autoCompleteBE.data = data;
        console.log('data', data)
      } else {
        console.log('Failed to fetch auto-complete data');
      }
    });

  })

</script>

Events for adding and removing items 

<sl-auto-complete multi-select id="auto-complete-json"></sl-auto-complete>

<script type="module">

  const autoCompleteJSON = document.getElementById('auto-complete-json');

  autoCompleteJSON.label = 'Search for answers'

  autoCompleteJSON.addEventListener('update-item', (e) => {
    console.log('Select items updated: ', e.detail)
  });

  const json = {
  "categories": [
    { "id": 1, "category": "Technology" },
    { "id": 2, "category": "Science" },
    { "id": 3, "category": "Arts" },
    { "id": 4, "category": "Sports" },
    { "id": 5, "category": "Food" },
    { "id": 6, "category": "Travel" },
    { "id": 7, "category": "Health" },
    { "id": 8, "category": "Finance" },
    { "id": 9, "category": "Education" },
    { "id": 10, "category": "Entertainment" },
    { "id": 11, "category": "Fashion" },
    { "id": 12, "category": "Politics" },
    { "id": 13, "category": "Environment" },
    { "id": 14, "category": "History" },
    { "id": 15, "category": "Literature" },
    { "id": 16, "category": "Music" },
    { "id": 17, "category": "Automotive" },
    { "id": 18, "category": "Pets" },
    { "id": 19, "category": "Fitness" },
    { "id": 20, "category": "Business" }
  ],
  "data": [
    {
      "value": "Artificial Intelligence",
      "category": [{"id": 1, "order": 1}, {"id": 2, "order": 2}],
      "favorite": true
    },
    {
      "value": "Quantum Computing",
      "category": [{"id": 1, "order": 2}, {"id": 2, "order": 1}],
      "favorite": false
    },
    {
      "value": "Impressionism",
      "category": [{"id": 3, "order": 1}, {"id": 14, "order": 2}],
      "favorite": true
    },
    {
      "value": "Olympic Games",
      "category": [{"id": 4, "order": 1}, {"id": 10, "order": 2}],
      "favorite": false
    },
    {
      "value": "Sushi",
      "category": [{"id": 5, "order": 1}, {"id": 6, "order": 2}],
      "favorite": true
    },
    {
      "value": "Machu Picchu",
      "category": [{"id": 6, "order": 1}, {"id": 14, "order": 2}],
      "favorite": false
    },
    {
      "value": "Yoga",
      "category": [{"id": 7, "order": 1}, {"id": 19, "order": 2}],
      "favorite": true
    },
    {
      "value": "Cryptocurrency",
      "category": [{"id": 8, "order": 1}, {"id": 1, "order": 2}],
      "favorite": false
    },
    {
      "value": "Online Learning",
      "category": [{"id": 9, "order": 1}, {"id": 1, "order": 2}],
      "favorite": true
    },
    {
      "value": "Netflix",
      "category": [{"id": 10, "order": 1}, {"id": 20, "order": 2}],
      "favorite": false
    },
    {
      "value": "Sustainable Fashion",
      "category": [{"id": 11, "order": 1}, {"id": 13, "order": 2}],
      "favorite": true
    },
    {
      "value": "Brexit",
      "category": [{"id": 12, "order": 1}, {"id": 8, "order": 2}],
      "favorite": false
    },
    {
      "value": "Renewable Energy",
      "category": [{"id": 13, "order": 1}, {"id": 2, "order": 2}],
      "favorite": true
    },
    {
      "value": "Ancient Egypt",
      "category": [{"id": 14, "order": 1}, {"id": 9, "order": 2}],
      "favorite": false
    },
    {
      "value": "Shakespeare",
      "category": [{"id": 15, "order": 1}, {"id": 3, "order": 2}],
      "favorite": true
    },
    {
      "value": "Jazz",
      "category": [{"id": 16, "order": 1}, {"id": 3, "order": 2}],
      "favorite": false
    },
    {
      "value": "Electric Vehicles",
      "category": [{"id": 17, "order": 1}, {"id": 13, "order": 2}],
      "favorite": true
    },
    {
      "value": "Dog Training",
      "category": [{"id": 18, "order": 1}, {"id": 9, "order": 2}],
      "favorite": false
    },
    {
      "value": "CrossFit",
      "category": [{"id": 19, "order": 1}, {"id": 7, "order": 2}],
      "favorite": true
    },
    {
      "value": "Startup Incubators",
      "category": [{"id": 20, "order": 1}, {"id": 8, "order": 2}],
      "favorite": false
    },
    {
      "value": "5G Networks",
      "category": [{"id": 1, "order": 1}, {"id": 20, "order": 2}],
      "favorite": true
    },
    {
      "value": "CRISPR",
      "category": [{"id": 2, "order": 1}, {"id": 7, "order": 2}],
      "favorite": false
    },
    {
      "value": "Street Art",
      "category": [{"id": 3, "order": 1}, {"id": 6, "order": 2}],
      "favorite": true
    },
    {
      "value": "Formula 1",
      "category": [{"id": 4, "order": 1}, {"id": 17, "order": 2}],
      "favorite": false
    },
    {
      "value": "Veganism",
      "category": [{"id": 5, "order": 1}, {"id": 7, "order": 2}],
      "favorite": true
    },
    {
      "value": "Bali",
      "category": [{"id": 6, "order": 1}, {"id": 5, "order": 2}],
      "favorite": false
    },
    {
      "value": "Meditation",
      "category": [{"id": 7, "order": 1}, {"id": 19, "order": 2}],
      "favorite": true
    },
    {
      "value": "Stock Market",
      "category": [{"id": 8, "order": 1}, {"id": 20, "order": 2}],
      "favorite": false
    },
    {
      "value": "STEM Education",
      "category": [{"id": 9, "order": 1}, {"id": 2, "order": 2}],
      "favorite": true
    },
    {
      "value": "TikTok",
      "category": [{"id": 10, "order": 1}, {"id": 1, "order": 2}],
      "favorite": false
    },
    {
      "value": "Vintage Clothing",
      "category": [{"id": 11, "order": 1}, {"id": 14, "order": 2}],
      "favorite": true
    },
    {
      "value": "Climate Change",
      "category": [{"id": 12, "order": 1}, {"id": 13, "order": 2}],
      "favorite": false
    },
    {
      "value": "Ocean Conservation",
      "category": [{"id": 13, "order": 1}, {"id": 2, "order": 2}],
      "favorite": true
    },
    {
      "value": "Industrial Revolution",
      "category": [{"id": 14, "order": 1}, {"id": 20, "order": 2}],
      "favorite": false
    },
    {
      "value": "Poetry Slam",
      "category": [{"id": 15, "order": 1}, {"id": 10, "order": 2}],
      "favorite": true
    },
    {
      "value": "K-pop",
      "category": [{"id": 16, "order": 1}, {"id": 11, "order": 2}],
      "favorite": false
    },
    {
      "value": "Self-Driving Cars",
      "category": [{"id": 17, "order": 1}, {"id": 1, "order": 2}],
      "favorite": true
    },
    {
      "value": "Cat Cafes",
      "category": [{"id": 18, "order": 1}, {"id": 5, "order": 2}],
      "favorite": false
    },
    {
      "value": "HIIT Workouts",
      "category": [{"id": 19, "order": 1}, {"id": 7, "order": 2}],
      "favorite": true
    },
    {
      "value": "Remote Work",
      "category": [{"id": 20, "order": 1}, {"id": 1, "order": 2}],
      "favorite": false
    },
    {
      "value": "Blockchain",
      "category": [{"id": 1, "order": 1}, {"id": 8, "order": 2}],
      "favorite": true
    },
    {
      "value": "Astrophysics",
      "category": [{"id": 2, "order": 1}, {"id": 9, "order": 2}],
      "favorite": false
    },
    {
      "value": "Virtual Reality Art",
      "category": [{"id": 3, "order": 1}, {"id": 1, "order": 2}],
      "favorite": true
    },
    {
      "value": "Esports",
      "category": [{"id": 4, "order": 1}, {"id": 10, "order": 2}],
      "favorite": false
    },
    {
      "value": "Farm-to-Table",
      "category": [{"id": 5, "order": 1}, {"id": 13, "order": 2}],
      "favorite": true
    },
    {
      "value": "Digital Nomads",
      "category": [{"id": 6, "order": 1}, {"id": 20, "order": 2}],
      "favorite": false
    },
    {
      "value": "Telemedicine",
      "category": [{"id": 7, "order": 1}, {"id": 1, "order": 2}],
      "favorite": true
    },
    {
      "value": "Microfinance",
      "category": [{"id": 8, "order": 1}, {"id": 12, "order": 2}],
      "favorite": false
    },
    {
      "value": "Gamification",
      "category": [{"id": 9, "order": 1}, {"id": 10, "order": 2}],
      "favorite": true
    },
    {
      "value": "Podcasting",
      "category": [{"id": 10, "order": 1}, {"id": 15, "order": 2}],
      "favorite": false
    },
    {
      "value": "Athleisure",
      "category": [{"id": 11, "order": 1}, {"id": 19, "order": 2}],
      "favorite": true
    },
    {
      "value": "Fake News",
      "category": [{"id": 12, "order": 1}, {"id": 9, "order": 2}],
      "favorite": false
    },
    {
      "value": "Vertical Farming",
      "category": [{"id": 13, "order": 1}, {"id": 5, "order": 2}],
      "favorite": true
    },
    {
      "value": "Cold War",
      "category": [{"id": 14, "order": 1}, {"id": 12, "order": 2}],
      "favorite": false
    },
    {
      "value": "Fan Fiction",
      "category": [{"id": 15, "order": 1}, {"id": 10, "order": 2}],
      "favorite": true
    },
    {
      "value": "Vinyl Revival",
      "category": [{"id": 16, "order": 1}, {"id": 14, "order": 2}],
      "favorite": false
    },
    {
      "value": "Flying Cars",
      "category": [{"id": 17, "order": 1}, {"id": 2, "order": 2}],
      "favorite": true
    },
    {
      "value": "Animal Therapy",
      "category": [{"id": 18, "order": 1}, {"id": 7, "order": 2}],
      "favorite": false
    },
    {
      "value": "Wearable Tech",
      "category": [{"id": 19, "order": 1}, {"id": 1, "order": 2}],
      "favorite": true
    },
    {
      "value": "Gig Economy",
      "category": [{"id": 20, "order": 1}, {"id": 8, "order": 2}],
      "favorite": false
    },
    {
      "value": "Internet of Things",
      "category": [{"id": 1, "order": 1}, {"id": 20, "order": 2}],
      "favorite": true
    },
    {
      "value": "Neuroscience",
      "category": [{"id": 2, "order": 1}, {"id": 7, "order": 2}],
      "favorite": false
    },
    {
      "value": "3D Printing",
      "category": [{"id": 3, "order": 1}, {"id": 1, "order": 2}],
      "favorite": true
    },
    {
      "value": "Extreme Sports",
      "category": [{"id": 4, "order": 1}, {"id": 6, "order": 2}],
      "favorite": false
    },
    {
      "value": "Molecular Gastronomy",
      "category": [{"id": 5, "order": 1}, {"id": 2, "order": 2}],
      "favorite": true
    },
    {
      "value": "Ecotourism",
      "category": [{"id": 6, "order": 1}, {"id": 13, "order": 2}],
      "favorite": false
    },
    {
      "value": "Personalized Medicine",
      "category": [{"id": 7, "order": 1}, {"id": 2, "order": 2}],
      "favorite": true
    },
    {
      "value": "Crowdfunding",
      "category": [{"id": 8, "order": 1}, {"id": 20, "order": 2}],
      "favorite": false
    }
  ]
}

  autoCompleteJSON.data = json
  autoCompleteJSON.helpText = 'Start typing to search...'
</script>

[component-metadata:sl-auto-complete]

Slots

Name Description
(default) The default slot.
dropdown-header The dropdown header slot.
icon The icon slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
data The data to display in the auto-complete dropdown. AutoCompleteData { categories: [], data: [] }
label The label of the input element. string ''
stacked Set to true to stack the label on top of the input. boolean true
helpText The help text of the input element. string ''
multiSelect
multi-select 		Set to true to enable multi-select. boolean false
size The size of the input element. - 'medium'
backendFilter
backend-filter 		Set to true to enable backend filtering. boolean false
noResultsText
no-results-text 		The text to display when there are no results. string 'No clients or accounts match your search.'
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-change Emitted when an item is selected. -
sl-input Emitted when the input value changes. -

Learn more about events.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>
  • <sl-input>
  • <sl-tag>