Auto Complete Hds

<sl-auto-complete-hds> | SlAutoCompleteHds
Since 1.0 experimental

Auto Complete Component

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

Examples

Sizes Small | Medium | Large 

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

Labels, placeholder and help text 

<sl-auto-complete-hds label="Search" placeholder="Custom placeholder text" help-text="Start typing to search"></sl-auto-complete-hds>

Static data filtering 

<sl-auto-complete-hds id="auto-complete-events"></sl-auto-complete-hds>

<script type="module">

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

  autoCompleteJSON.placeholder = 'Start typing: Artificial Intelligence'
  const json = {
    "categories": [],
    "data": [
      {
        "value": "Artificial Intelligence",
        "category": [],
        "favorite": true
      },
      {
        "value": "Quantum Computing",
        "category": [],
        "favorite": false
      }
    ]
  }

  autoCompleteJSON.data = json
</script>

Tag Handling for Long Text

There are use cases where tag labels are out of our control and have very long text. In this case, there is a need to apply a --tag-width property for the tag and the text will truncate if it overflows. The tag label will start truncating when the tag is 240px or larger. The max width of the tag would depend on the context it is used in and the application developer can control this.

A tooltip showing the full tag label will appear on hover and in focus state.

Truncation should be set at the tag label’s middle or end, depending on what is best for the given use case. The default variant should be middle truncation.

Set the truncate attribute to control how text is truncated when it exceeds the available width. Options are end (default) or middle. 

<div style="display: flex; flex-direction: column; gap: 20px;">
  <!-- Middle truncation example -->
  <sl-auto-complete-hds multi-select id="middle-truncation"
    style="--tag-width: 240px;"
    truncate="middle">
  </sl-auto-complete-hds>

  <!-- End truncation example with narrower tags -->
  <sl-auto-complete-hds multi-select id="end-truncation"
    style="--tag-width: 180px;"
    truncate="end">
  </sl-auto-complete-hds>
</div>

<script type="module">
  // Sample data with long tag texts
  const json = {
    "categories": [],
    "data": [
      {
        "value": "Tag 1",
        "category": [],
        "favorite": true
      },
      {
        "value": "Tag 2",
        "category": [],
        "favorite": true
      },
      {
        "value": "Tag 3",
        "category": [],
        "favorite": true
      },
      {
        "value": "Artificial Intelligence Machine Learning Deep Neural Networks and Natural Language Processing",
        "category": [],
        "favorite": true
      },
      {
        "value": "Quantum Computing",
        "category": [],
        "favorite": false
      },
      {
        "value": "Blockchain Distributed Ledger Technology Smart Contracts and Decentralized Finance Applications",
        "category": [],
        "favorite": false
      }
    ]
  };

  // Set up middle truncation example
  const middleTruncation = document.getElementById('middle-truncation');
  middleTruncation.label = 'Middle Truncation (240px tag width)';
  middleTruncation.placeholder = 'Type to select tags';
  middleTruncation.data = json;

  // Set up end truncation example
  const endTruncation = document.getElementById('end-truncation');
  endTruncation.label = 'End Truncation (180px tag width)';
  endTruncation.placeholder = 'Type to select tags';
  endTruncation.data = json;
</script>

Multi Select 

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

<script type="module">

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

  autoCompleteJSON.placeholder = 'Start typing: Artificial Intelligence'
  const json = {
    "categories": [],
    "data": [
      {
        "value": "Artificial Intelligence",
        "category": [],
        "favorite": true
      },
      {
        "value": "Quantum Computing",
        "category": [],
        "favorite": false
      }
    ]
  }

  autoCompleteJSON.data = json
</script>

Multi Select with Checkboxes 

<sl-auto-complete-hds multi-select checkboxes id="auto-complete-multi-checkbox"></sl-auto-complete-hds>

<script type="module">

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

  autoCompleteJSON.placeholder = 'Start typing: Artificial Intelligence'
  const json = {
    "categories": [],
    "data": [
      {
        "value": "Artificial Intelligence",
        "category": [],
        "favorite": true
      },
      {
        "value": "Quantum Computing",
        "category": [],
        "favorite": false
      }
    ]
  }

  autoCompleteJSON.data = json
</script>

Events for adding and removing items

Start typing ‘Artificial Intelligence’

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

<script type="module">

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

  autoCompleteJSON.label = 'Search for answers'
  autoCompleteJSON.placeholder = 'Start typing: Artificial Intelligence'
  autoCompleteJSON.helpText = 'Start typing: Artificial Intelligence'
  const json = {
    "categories": [],
    "data": [
      {
        "value": "Artificial Intelligence",
        "category": [],
        "favorite": true
      },
      {
        "value": "Quantum Computing",
        "category": [],
        "favorite": false
      }
    ]
  }

  autoCompleteJSON.data = json

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


</script>

Setting the maximum dropdown height

The maximum dropdown height can be set using the --max-dropdown-height variable.

<sl-auto-complete-hds style="--max-dropdown-height: 500px" multi-select backend-filter id="auto-complete-backend"></sl-auto-complete-hds>

Mocked Backend filtering with multi select 

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

<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>

Mocked Backend filtering with multi select and checkboxes 

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

<script type="module">

  const autoCompleteCheckboxes = document.getElementById('auto-complete-checkboxes');

  autoCompleteCheckboxes.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;
    }
  }

  autoCompleteCheckboxes.addEventListener('search-string', (e) => {
    console.log('autoCompleteCheckboxes', e.detail)

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

  })

</script>

disabled state 

<sl-auto-complete-hds multi-select disabled label="disabled state" id="autoCompleteDisabled"></sl-auto-complete-hds>

<script type="module">
document.addEventListener('DOMContentLoaded', () => {
  const autoCompleteDisabled = document.getElementById('autoCompleteDisabled');

  autoCompleteDisabled.data = {
    data: [
      { value: "Artificial Intelligence" },
      { value: "Quantum Computing" },
      { value: "Machine Learning" },
      { value: "Deep Learning" },
      { value: "Natural Language Processing" },
      { value: "Computer Vision" },
      { value: "Robotics" },
    ]
  };

  autoCompleteDisabled.selectedItems = [
    { value: "Natural Language Processing" },
    { value: "Computer Vision" },
  ];
});
</script>

readonly state 

<sl-auto-complete-hds multi-select readonly label="readonly state" id="autoCompleteReadonly"></sl-auto-complete-hds>

<script type="module">
const autoCompleteReadonly = document.getElementById('autoCompleteReadonly');

autoCompleteReadonly.data = {
  data: [
    { value: "Artificial Intelligence" },
    { value: "Quantum Computing" },
    { value: "Machine Learning" },
    { value: "Deep Learning" },
    { value: "Natural Language Processing" },
    { value: "Computer Vision" },
    { value: "Robotics" },
  ]
};

autoCompleteReadonly.selectedItems = [
  { value: "Natural Language Processing" },
  { value: "Computer Vision" },
];
</script>

Reactivity

reactively set selected items

Click me to set 1 selected item Click me to set 2 selected items Click me to set loads of selected items 

<sl-button id="btnAutoCompleteReactiveSelectedItems_singleItem">Click me to set 1 selected item</sl-button>
<sl-button id="btnAutoCompleteReactiveSelectedItems_multipleItems">Click me to set 2 selected items</sl-button>
<sl-button id="btnAutoCompleteReactiveSelectedItems_loadsOfItems">Click me to set loads of selected items</sl-button>
<sl-auto-complete-hds multi-select label="reactive selected items" id="autoCompleteReactiveSelectedItems"></sl-auto-complete-hds>

<script type="module">
//document.addEventListener('DOMContentLoaded', () => {
  const autoCompleteReactiveSelectedItems = document.getElementById('autoCompleteReactiveSelectedItems');

  autoCompleteReactiveSelectedItems.data = {
    data: [
      { value: "Artificial Intelligence" },
      { value: "Quantum Computing" },
      { value: "Machine Learning" },
      { value: "Deep Learning" },
      { value: "Natural Language Processing" },
      { value: "Computer Vision" },
      { value: "Robotics" },
      { value: "Internet of Things" },
      { value: "Big Data" },
      { value: "Cloud Computing" },
      { value: "Blockchain" },
      { value: "Cybersecurity" },
      { value: "Data Science" },
      { value: "Virtual Reality" },
      { value: "Augmented Reality" },
      { value: "Edge Computing" },
      { value: "5G Technology" },
      { value: "Autonomous Vehicles" },
      { value: "DevOps" },
      { value: "Microservices" },
      { value: "Serverless Architecture" },
      { value: "Containerization" },
      { value: "Kubernetes" },
      { value: "Docker" },
      { value: "UI/UX Design" },
      { value: "Human–Computer Interaction" },
      { value: "Software Testing" },
      { value: "Agile Methodology" },
      { value: "DevSecOps" },
      { value: "Data Visualization" },
      { value: "Reinforcement Learning" },
      { value: "Genetic Algorithms" },
      { value: "Swarm Intelligence" },
      { value: "Distributed Systems" },
      { value: "High-Performance Computing" },
      { value: "Bioinformatics" },
      { value: "Quantum Cryptography" },
      { value: "Neural Networks" },
      { value: "Semantic Web" },
      { value: "Knowledge Graphs" },
      { value: "Chatbots" },
      { value: "Large Language Models" },
      { value: "Federated Learning" },
      { value: "Explainable AI" },
      { value: "AI Ethics" },
      { value: "Computer Graphics" },
      { value: "Parallel Computing" },
      { value: "Real-Time Systems" },
      { value: "Natural Computing" }
    ]
  };

  document.getElementById('btnAutoCompleteReactiveSelectedItems_singleItem').addEventListener('click', () => {
    autoCompleteReactiveSelectedItems.selectedItems = [
      { "value": "Quantum Computing" }
    ];
  });

  document.getElementById('btnAutoCompleteReactiveSelectedItems_multipleItems').addEventListener('click', () => {
    autoCompleteReactiveSelectedItems.selectedItems = [
      { "value": "Quantum Computing" },
      { "value": "Artificial Intelligence" }
    ];
  });

  document.getElementById('btnAutoCompleteReactiveSelectedItems_loadsOfItems').addEventListener('click', () => {
    autoCompleteReactiveSelectedItems.selectedItems = [
      { value: "Artificial Intelligence" },
      { value: "Quantum Computing" },
      { value: "Machine Learning" },
      { value: "Deep Learning" },
      { value: "Natural Language Processing" },
      { value: "Computer Vision" },
      { value: "Robotics" },
      { value: "Internet of Things" },
      { value: "Big Data" },
      { value: "Cloud Computing" },
      { value: "Blockchain" },
      { value: "Cybersecurity" },
      { value: "Data Science" },
      { value: "Virtual Reality" },
      { value: "Augmented Reality" }
    ];
  });
//});

</script>

[component-metadata:sl-auto-complete-hds]

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
help-text 		The help text of the input element. string ''
multiSelect
multi-select 		Set to true to enable multi-select. boolean false
checkboxes Enables checkbox mode in the dropdown. 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.'
truncationStyle
truncate 		Controls how text is truncated in tags. Options are ‘middle’ or ‘end’ 'middle' | 'end' 'middle'
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. -
update-item Emitted when an item is added or removed from the selected items. -
search-string Emitted when the input value changes, allowing for backend filtering or other actions based on the search string. -

Learn more about events.

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>