Auto complete
Auto complete is designed to enhance the user experience by providing real-time suggestions or predictions as users type into a text input field.
When to use
- Implement autocomplete in search boxes to provide real-time suggestions as users type, improving search accuracy and efficiency.
- When users need to filter and narrow down options from a large dataset, autocomplete helps them refine their selections based on keywords or attributes.
- Autocomplete is beneficial for remembering and suggesting previously searched or entered queries, saving users time and effort.
- Allow users to personalize autocomplete suggestions based on their preferences, previous selections, or usage history.
- In registration or login forms, autocomplete can assist users in entering usernames, email addresses, or previously used inputs to prevent errors and save time.
- Implement dynamic autocomplete that updates suggestions as users type, ensuring the list remains contextually relevant.
Guidelines
- Clearly define the purpose of the autocomplete component, ensuring that users understand when and where it should be used.
- Ensure that the autocomplete component is responsive and functions well on various screen sizes and devices, including mobile devices.
- Provide real-time feedback as users type, showing autocomplete suggestions promptly and updating them as the input changes.
- If there's a delay in fetching autocomplete suggestions, display a loading indicator to inform users that the system is processing their request.
- Include a message or action for situations where no autocomplete suggestions match the user's input. Provide guidance on what to do next.
Basic
Autocomplete options can be grouped in button tag.
<div class="dropdown">
<label class="form-label">Select Country</label>
<input type="text" class="jAuto form-control dropdown-toggle"
placeholder="Type the word Alpha" autocomplete="off">
<div class="dropdown-menu">
<i class="hasNoResults">No matching results</i>
<div class="list-autocomplete">
<button type="button" class="dropdown-item">01 - Alpha Barbuda</button>
<button type="button" class="dropdown-item">02 - Charlie Alpha</button>
<button type="button" class="dropdown-item">03 - Bravo Alpha</button>
<button type="button" class="dropdown-item">04 - Delta</button>
</div>
</div>
</div>
Sizes
"form-control-sm" & "form-control-lg" classes can be used for small and large variants of autocomplete input.
<div class="row justify-content-center">
<div class="col-md-6 autocomplete mb-3">
<div class="dropdown">
<label class="form-label">Select Country</label>
<input type="text" class="jAuto form-control form-control-sm dropdown-toggle" placeholder="Type the word Alpha" autocomplete="off" aria-label="Select Country">
<div class="dropdown-menu">
<i class="hasNoResults">No matching results</i>
<div class="list-autocomplete">
<button type="button" class="dropdown-item">01 - Alpha Barbuda</button>
<button type="button" class="dropdown-item">02 - Charlie Alpha</button>
<button type="button" class="dropdown-item">03 - Bravo Alpha</button>
<button type="button" class="dropdown-item">04 - Delta</button>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 autocomplete mb-3">
<div class="dropdown">
<label class="form-label">Select Country</label>
<input type="text" class="jAuto form-control dropdown-toggle" placeholder="Type the word Alpha" autocomplete="off" aria-label="Select Country">
<div class="dropdown-menu">
<i class="hasNoResults">No matching results</i>
<div class="list-autocomplete">
<button type="button" class="dropdown-item">01 - Alpha Barbuda</button>
<button type="button" class="dropdown-item">02 - Charlie Alpha</button>
<button type="button" class="dropdown-item">03 - Bravo Alpha</button>
<button type="button" class="dropdown-item">04 - Delta</button>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 autocomplete mb-3">
<div class="dropdown">
<label class="form-label">Select Country</label>
<input type="text" class="jAuto form-control form-control-lg dropdown-toggle" placeholder="Type the word Alpha" autocomplete="off" aria-label="Select Country">
<div class="dropdown-menu">
<i class="hasNoResults">No matching results</i>
<div class="list-autocomplete">
<button type="button" class="dropdown-item">01 - Alpha Barbuda</button>
<button type="button" class="dropdown-item">02 - Charlie Alpha</button>
<button type="button" class="dropdown-item">03 - Bravo Alpha</button>
<button type="button" class="dropdown-item">04 - Delta</button>
</div>
</div>
</div>
</div>
</div>
Template
Options are grouped in a button tag for easy accessibility.
<div class="dropdown">
<label class="form-label">Select Country</label>
<div class="d-flex">
<input type="text" class="jAuto form-control dropdown-toggle" placeholder="Type the word Alpha" autocomplete="off"><button class="btn btn-primary dropdown-btn"><i class="ds ds-chevron-down"></i></button>
</div>
<div class="dropdown-menu">
<i class="hasNoResults">No matching results</i>
<div class="list-autocomplete">
<button type="button" class="dropdown-item"><img src="ds-assets/images/flag-fill.svg" class="me-2" />01 - Alpha Barbuda</button>
<button type="button" class="dropdown-item"><img src="ds-assets/images/flag-fill.svg" class="me-2" />02 - Charlie Alpha</button>
<button type="button" class="dropdown-item"><img src="ds-assets/images/flag-fill.svg" class="me-2" />03 - Bravo Alpha</button>
<button type="button" class="dropdown-item"><img src="ds-assets/images/flag-fill.svg" class="me-2" />04 - Delta</button>
</div>
</div>
</div>
Grouped
Group title is defined with heading tag and options can be grouped under that.
<div class="dropdown">
<label class="form-label">Select Country</label>
<input type="text" class="jAuto form-control dropdown-toggle" placeholder="Type the word Alpha" autocomplete="off">
<div class="dropdown-menu">
<i class="hasNoResults">No matching results</i>
<div class="list-autocomplete">
<h3>Group 1</h3>
<button type="button" class="dropdown-item">01 - Alpha Barbuda</button>
<button type="button" class="dropdown-item">02 - Charlie Alpha</button>
<button type="button" class="dropdown-item">03 - Bravo Alpha</button>
<button type="button" class="dropdown-item">04 - Delta</button>
<h3>Group 2</h3>
<button type="button" class="dropdown-item">01 - Alpha Group 2</button>
<button type="button" class="dropdown-item">02 - Group 2 Alpha</button>
<button type="button" class="dropdown-item">03 - Group 2 Alpha</button>
<button type="button" class="dropdown-item">04 - Delta Group 2</button>
</div>
</div>
</div>
Accessibility
- Include a message or action for situations where no autocomplete suggestions match the user's input. Provide guidance on what to do next.
- Ensure full keyboard accessibility so that users can navigate and interact with the component using only the keyboard. Implement keyboard shortcuts for selecting and navigating through suggestions.
- Manage focus properly by moving keyboard focus to the suggestion list when it appears. Indicate the currently focused suggestion with a visible focus indicator.
- Utilize ARIA roles and attributes to enhance the accessibility of the autocomplete component. For example:
- Use role="listbox" for the suggestion list.
- Use role="option" for each suggestion item.
- Implement aria-expanded to indicate whether the suggestion list is open or closed.
- Autocomplete component should work well with screen readers (e.g., JAWS, NVDA, VoiceOver) to ensure that it is properly announced and that users can understand how to use it.
- Ensure that keyboard focus is trapped within the autocomplete component when the suggestion list is open, preventing users from tabbing outside the component accidentally.