Autocompletes are text inputs that display lists of suggested terms below as users type, allowing them to select from relevant options.
Autocomplete inputs help users quickly find what they need by displaying relevant suggestions as they type. You can include additional details for each suggestion to provide more context.
When to use Autocomplete
The Autocomplete component consists of only the input element and the suggestions displayed while you type (ie it doesn't include other elements associated with an entire form like the label and submit button).
It is likely Autocomplete won't be used in isolation, since it is utilised by the SiteSearch component which should be considered instead.
Examples in GOSS products
- In all SiteSearch components with the autocomplete option switched on (enabled by default)
- The Event Search template
Accessibility considerations
The suggestions use ARIA attributes to define the listbox role and to associate it with the same label as the input. The input is marked with
General notes
Consider using SiteSearch instead, or building a new component that wraps this as an internal feature. Direct use of this component is discouraged.
Basic Autocomplete
An autocomplete input with the subsite's search article set as the data URL, with the label provided separately.
The data URL will provide suggestions while typing into the input based on the current subsite's configured default Search article.
<label for="autocomplete_basic" id="autocomplete_basic_label">Mandatory label for autocomplete </label>
<div class="search-suggestion-wrapper">
<div aria-expanded="false" aria-haspopup="listbox" aria-owns="autocomplete_basic_suggestions" id="autocomplete_basic_container" role="combobox">
<input autocomplete="off" class="searchform__inputtxt" data-dataurl="https://docs.gossinteractive.com/article/5655/Search" id="autocomplete_basic" name="q" type="text" />
</div>
<ul aria-labelledby="autocomplete_basic_label" class="search-suggestion" id="autocomplete_basic_suggestions" role="listbox"></ul>
</div>
<script>
var autocomplete = new SearchSuggestion({
element: 'input[id="autocomplete_basic"]',
modifier: ''
});
</script><label for="autocomplete_basic" id="autocomplete_basic_label">Mandatory label for autocomplete</label>
<comp:autocomplete dataurl="#{subsite.searchArticle.articleAbsoluteURL}" id="autocomplete_basic" />@{
AutoCompleteSettings settings = new AutoCompleteSettings()
{
Id = "autocomplete_basic_label",
DataUrl = Html.Link(Model.Model.SearchArticle)
};
}
@{
<label for="autocomplete_basic" id="autocomplete_basic_label">Mandatory label for autocomplete</label>
Html.AutoComplete(settings);
}Share this page
