Agility Search offers two out of the box options that can be embedded in any of your sites without any code updates, as long as Agility Search is enabled for your site. The two options are "Built-in Search" and "Built-in Grouped Search". Both options can be embedded to any page by simply adding a Rich Text Area.
Drop in a div element with "agility-search-panel" class in a Rich Text Area Module's code editor by clicking "View HTML Code" button of the rich text area.
You should be able to see the search input on your site now.
Built-in Grouped Search
Built-in Grouped Search can be embedded just like Built-in Search. However, the class of the HTML element should be as follows:
In addition to the class attribute of the div element, there are additional options that can be used by the help of data attributes and can be used like so
<div class="agility-grouped-search-panel" data-redirect-path="/search-results"
data-top="3" data-group-count="3" data-delay="250" data-pop-over="true"></div>
- Defines the path of the page that the user will be redirected to in the event the user chooses to hit enter or click search.
- Defines the maximum number of groups that the search will return.
- Defines the maximum number of results that will be returned from each group.
- Defines the milliseconds before triggering a search after each keystroke.
- Defines whether to show the results relative to the position of the search field or below it.