Site searches are designed to make it easy for users to quickly find what they need.
Site search components make it easy for users to find the information they need while staying focused on their tasks. They provide a simple, intuitive way to search without being distracting, and can include optional suggestions or filters to help users refine their results quickly.
When to use this component
Site search components are designed to help users locate information quickly and efficiently, ensuring an intuitive and effective experience. They are particularly useful for navigating large or complex sites, allowing users to enter keywords and receive relevant results instantly.
Additionally, site search can include features like autocomplete or filters to refine searches, making it easier for users to find exactly what they need.
Examples in GOSS products
- The framework Search template
- Chill theme header
- Command theme header and mobile menu
- Cruise theme header and home template services area
- Dynamic theme header, mobile menu, and home template with the search banner configured
- Impact theme header and mobile menu
Accessibility considerations
The form is recognised as a search form by assistive technology, ensuring accessibility.
Both the Close and Search buttons are HTML button elements, with the type attribute specifying which button will submit the form when the Enter key is pressed.
General notes
The SiteSearch component utilises the autocomplete component by default, but can be configured not to.
The component was developed to interchangeably offer all of the differences in behaviour experienced across the themes via data attribute switches, each of which will be covered below. To offer skinning flexibility, it is possible to adjust these switches with JavaScript, however remember to ensure that the no-JS experience is styled appropriately as well.
Basic site search
An search component with no additional configuration options.
All uses of the SiteSearch component must specify the searchFormTargetUrl parameter, which will passed into the inner autocomplete component as well.
<form action="https://docs.gossinteractive.com/article/5655/Search" class="gi-sitesearch" data-collapsible="false" data-focus-open="false" data-suppress-closebtn="false" id="c_14313383604904" method="get" role="search">
<div class="gi-sitesearch__container">
<div class="gi-sitesearch__closetoggle">
<button class="btn btn--close btn--icon-only gi-sitesearch__button gi-sitesearch__button--close" type="button">
<span class="btn__text gi-sitesearch__buttontext accessibility">Close</span>
</button>
</div>
<div class="gi-sitesearch__searchfield">
<label class="gi-sitesearch__label accessibility" for="c_14313383604904_input" id="c_14313383604904_input_label">Enter your keyword(s):</label>
<div class="search-suggestion-wrapper">
<div aria-expanded="false" aria-haspopup="listbox" aria-owns="c_14313383604904_input_suggestions" id="c_14313383604904_input_container" role="combobox">
<input autocomplete="off" class="searchform__inputtxt searchform__inputtxt--sitesearch" data-dataurl="https://docs.gossinteractive.com/article/5655/Search" id="c_14313383604904_input" name="q" placeholder="Search..." type="text" />
</div>
<ul aria-labelledby="c_14313383604904_input_label" class="search-suggestion search-suggestion--sitesearch" id="c_14313383604904_input_suggestions" role="listbox"></ul>
</div>
<script>
var autocomplete = new SearchSuggestion({
element: 'input[id="c_14313383604904_input"]',
modifier: 'sitesearch'
});
</script>
</div>
<div class="gi-sitesearch__searchtoggle">
<button class="btn btn--search btn--icon-only gi-sitesearch__button gi-sitesearch__button--search" type="submit">
<span class="btn__text gi-sitesearch__buttontext accessibility">Find</span>
</button>
</div>
</div>
</form>
<script>gi.sitesearch.initialise("c_14313383604904");</script><comp:siteSearch searchFormTargetUrl="#{subsite.searchArticle.articleAbsoluteURL}" />@{
var url = Html.Link(Model.NavigationArticle);
var label = Model.NavigationArticle.SearchTemplatePlaceholderText("Search...");
var searchSettings = new SiteSearchSettings(url)
{
AutoFocus = string.IsNullOrWhiteSpace(Model.Results.SearchTerms),
Id = "keywords",
Modifiers = new string[] { "searchtemplate" },
Param = "q",
Placeholder = label,
SearchBtnText = "Search",
SearchLabelText = label,
Value = Model.Results.SearchTerms,
};
}
@{ Html.SiteSearch(searchSettings); }Site search with autocomplete disabled
A site search component with the autocomplete attribute set to false.
autocomplete="off"
Setting the autocomplete attribute will disable the output of the autocomplete component within the SiteSearch component, and fall back to a simpler text input with many of the same attributes set.
<form action="https://docs.gossinteractive.com/article/5655/Search" class="gi-sitesearch" data-collapsible="false" data-focus-open="false" data-suppress-closebtn="false" id="c_503495020984200" method="get" role="search">
<div class="gi-sitesearch__container">
<div class="gi-sitesearch__closetoggle">
<button class="btn btn--close btn--icon-only gi-sitesearch__button gi-sitesearch__button--close" type="button">
<span class="btn__text gi-sitesearch__buttontext accessibility">Close</span>
</button>
</div>
<div class="gi-sitesearch__searchfield">
<label class="gi-sitesearch__label accessibility" for="c_503495020984200_input" id="c_503495020984200_input_label">Enter your keyword(s):</label>
<input autocomplete="off" class="searchform__inputtxt searchform__inputtxt--sitesearch" id="c_503495020984200_input" name="q" placeholder="Search..." type="text" />
</div>
<div class="gi-sitesearch__searchtoggle">
<button class="btn btn--search btn--icon-only gi-sitesearch__button gi-sitesearch__button--search" type="submit">
<span class="btn__text gi-sitesearch__buttontext accessibility">Find</span>
</button>
</div>
</div>
</form>
<script>gi.sitesearch.initialise("c_503495020984200");</script><comp:siteSearch searchFormTargetUrl="#{subsite.searchArticle.articleAbsoluteURL}" autocomplete="false" />Site search modifiers
A site search component with CSS modifiers applied.
gi-sitesearch gi-sitesearch--homepage
Adding CSS modifiers to the site search component allows for easy customisation, ensuring the design can adapt to different layouts or themes.
It also helps maintain consistency and scalability, making it simpler to implement variations without rewriting core styles.
<form action="https://docs.gossinteractive.com/article/5655/Search" class="gi-sitesearch gi-sitesearch--homepage" data-collapsible="false" data-focus-open="false" data-suppress-closebtn="false" id="c_503495020620300" method="get" role="search">
<div class="gi-sitesearch__container">
<div class="gi-sitesearch__closetoggle">
<button class="btn btn--close btn--icon-only gi-sitesearch__button gi-sitesearch__button--close" type="button">
<span class="btn__text gi-sitesearch__buttontext accessibility">Close</span>
</button>
</div>
<div class="gi-sitesearch__searchfield">
<label class="gi-sitesearch__label accessibility" for="c_503495020620300_input" id="c_503495020620300_input_label">Enter your keyword(s):</label>
<div class="search-suggestion-wrapper">
<div aria-expanded="false" aria-haspopup="listbox" aria-owns="c_503495020620300_input_suggestions" id="c_503495020620300_input_container" role="combobox">
<input autocomplete="off" class="searchform__inputtxt searchform__inputtxt--sitesearch" data-dataurl="https://docs.gossinteractive.com/article/5655/Search" id="c_503495020620300_input" name="q" placeholder="Search..." type="text" />
</div>
<ul aria-labelledby="c_503495020620300_input_label" class="search-suggestion search-suggestion--sitesearch" id="c_503495020620300_input_suggestions" role="listbox"></ul>
</div>
<script>
var autocomplete = new SearchSuggestion({
element: 'input[id="c_503495020620300_input"]',
modifier: 'sitesearch'
});
</script>
</div>
<div class="gi-sitesearch__searchtoggle">
<button class="btn btn--search btn--icon-only gi-sitesearch__button gi-sitesearch__button--search" type="submit">
<span class="btn__text gi-sitesearch__buttontext accessibility">Find</span>
</button>
</div>
</div>
</form>
<script>gi.sitesearch.initialise("c_503495020620300");</script><comp:siteSearch modifiers="homepage" searchFormTargetUrl="#{subsite.searchArticle.articleAbsoluteURL}" />Collapsible site search
A site search with the collapsed attribute set to 'false' will mean the disclosure starts expanded:
data-collapsible="true"
With the collapsible attribute set to true, the user will be presented with a single button that when used expands into a full text search field which is automatically focused.
Since a Close button is also provided by default, clicking the button a second time will submit the form to the configured search URL.
<form action="https://docs.gossinteractive.com/article/5655/Search" class="gi-sitesearch" data-collapsible="true" data-focus-open="false" data-suppress-closebtn="false" id="c_14313384759393" method="get" role="search">
<div class="gi-sitesearch__container">
<div class="gi-sitesearch__closetoggle">
<button class="btn btn--close btn--icon-only gi-sitesearch__button gi-sitesearch__button--close" type="button">
<span class="btn__text gi-sitesearch__buttontext accessibility">Close</span>
</button>
</div>
<div class="gi-sitesearch__searchfield">
<label class="gi-sitesearch__label accessibility" for="c_14313384759393_input" id="c_14313384759393_input_label">Enter your keyword(s):</label>
<div class="search-suggestion-wrapper">
<div aria-expanded="false" aria-haspopup="listbox" aria-owns="c_14313384759393_input_suggestions" id="c_14313384759393_input_container" role="combobox">
<input autocomplete="off" class="searchform__inputtxt searchform__inputtxt--sitesearch" data-dataurl="https://docs.gossinteractive.com/article/5655/Search" id="c_14313384759393_input" name="q" placeholder="Search..." type="text" />
</div>
<ul aria-labelledby="c_14313384759393_input_label" class="search-suggestion search-suggestion--sitesearch" id="c_14313384759393_input_suggestions" role="listbox"></ul>
</div>
<script>
var autocomplete = new SearchSuggestion({
element: 'input[id="c_14313384759393_input"]',
modifier: 'sitesearch'
});
</script>
</div>
<div class="gi-sitesearch__searchtoggle">
<button class="btn btn--search btn--icon-only gi-sitesearch__button gi-sitesearch__button--search" type="submit">
<span class="btn__text gi-sitesearch__buttontext accessibility">Find</span>
</button>
</div>
</div>
</form>
<script>gi.sitesearch.initialise("c_14313384759393");</script><comp:siteSearch collapsible="true" searchFormTargetUrl="#{subsite.searchArticle.articleAbsoluteURL}" />Collapsible site search with hidden close button
A site search component with the collapsible and suppress close button attributes set to true.
data-suppress-closebtn="true"
When the site search is configured to be collapsible it is also possible to configure whether the Close button should be suppressed.
When it is set to true, the action of the Search button is still to submit the form, however the text field will disappear when it loses focus.
<form action="https://docs.gossinteractive.com/article/5655/Search" class="gi-sitesearch" data-collapsible="true" data-focus-open="false" data-suppress-closebtn="true" id="c_14313384979320" method="get" role="search">
<div class="gi-sitesearch__container">
<div class="gi-sitesearch__closetoggle">
<button class="btn btn--close btn--icon-only gi-sitesearch__button gi-sitesearch__button--close" type="button">
<span class="btn__text gi-sitesearch__buttontext accessibility">Close</span>
</button>
</div>
<div class="gi-sitesearch__searchfield">
<label class="gi-sitesearch__label accessibility" for="c_14313384979320_input" id="c_14313384979320_input_label">Enter your keyword(s):</label>
<div class="search-suggestion-wrapper">
<div aria-expanded="false" aria-haspopup="listbox" aria-owns="c_14313384979320_input_suggestions" id="c_14313384979320_input_container" role="combobox">
<input autocomplete="off" class="searchform__inputtxt searchform__inputtxt--sitesearch" data-dataurl="https://docs.gossinteractive.com/article/5655/Search" id="c_14313384979320_input" name="q" placeholder="Search..." type="text" />
</div>
<ul aria-labelledby="c_14313384979320_input_label" class="search-suggestion search-suggestion--sitesearch" id="c_14313384979320_input_suggestions" role="listbox"></ul>
</div>
<script>
var autocomplete = new SearchSuggestion({
element: 'input[id="c_14313384979320_input"]',
modifier: 'sitesearch'
});
</script>
</div>
<div class="gi-sitesearch__searchtoggle">
<button class="btn btn--search btn--icon-only gi-sitesearch__button gi-sitesearch__button--search" type="submit">
<span class="btn__text gi-sitesearch__buttontext accessibility">Find</span>
</button>
</div>
</div>
</form>
<script>gi.sitesearch.initialise("c_14313384979320");</script><comp:siteSearch collapsible="true" searchFormTargetUrl="#{subsite.searchArticle.articleAbsoluteURL}" suppressCloseBtn="true" />Collapsible site search open on focus
A site search component with the collapsible and open on focus attributes set to true.
data-focus-open="true"
When the site search is configured to be collapsible with a close button shown, setting the open on focus attribute to true will cause the text field to expand and focus automatically when the user focuses the search button.
It will not collapse automatically when the text field or search buttons lose focus since this action is handled by the close button.
<form action="https://docs.gossinteractive.com/article/5655/Search" class="gi-sitesearch" data-collapsible="true" data-focus-open="true" data-suppress-closebtn="true" id="c_14313385106328" method="get" role="search">
<div class="gi-sitesearch__container">
<div class="gi-sitesearch__closetoggle">
<button class="btn btn--close btn--icon-only gi-sitesearch__button gi-sitesearch__button--close" type="button">
<span class="btn__text gi-sitesearch__buttontext accessibility">Close</span>
</button>
</div>
<div class="gi-sitesearch__searchfield">
<label class="gi-sitesearch__label accessibility" for="c_14313385106328_input" id="c_14313385106328_input_label">Enter your keyword(s):</label>
<div class="search-suggestion-wrapper">
<div aria-expanded="false" aria-haspopup="listbox" aria-owns="c_14313385106328_input_suggestions" id="c_14313385106328_input_container" role="combobox">
<input autocomplete="off" class="searchform__inputtxt searchform__inputtxt--sitesearch" data-dataurl="https://docs.gossinteractive.com/article/5655/Search" id="c_14313385106328_input" name="q" placeholder="Search..." type="text" />
</div>
<ul aria-labelledby="c_14313385106328_input_label" class="search-suggestion search-suggestion--sitesearch" id="c_14313385106328_input_suggestions" role="listbox"></ul>
</div>
<script>
var autocomplete = new SearchSuggestion({
element: 'input[id="c_14313385106328_input"]',
modifier: 'sitesearch'
});
</script>
</div>
<div class="gi-sitesearch__searchtoggle">
<button class="btn btn--search btn--icon-only gi-sitesearch__button gi-sitesearch__button--search" type="submit">
<span class="btn__text gi-sitesearch__buttontext accessibility">Find</span>
</button>
</div>
</div>
</form>
<script>gi.sitesearch.initialise("c_14313385106328");</script><comp:siteSearch collapsible="true" openOnFocus="true" searchFormTargetUrl="#{subsite.searchArticle.articleAbsoluteURL}" suppressCloseBtn="true" />
