Autosuggest
Connecting Autosuggest to Your Theme's Search Bar
When enabled the ElasticPress Autosuggest will automatically be added to any input[type="search"] elments on the page, as well as any elements with the .ep-autosuggest or .search-field classes. You can add autosuggest to additional elements yourself by adding selectors as a comma-separated list to the Autosuggest Selector setting under ElasticPress > Features > Autosuggest > Settings.
You can change or remove the default selectors used by the plugin with the ep_autosuggest_default_selectors filter:
add_filter( 'ep_autosuggest_default_selectors', '__return_empty_string' );
This example uses the __return_empty_string() function to remove the default selectors so that only the selectors entered into the settings are used.
Adding a Loading Indicator
While new suggestions are being fetched as the user types, an .is-loading class will be added to the parent <form> element. This class can be used to style the search form differently while suggestions are being loaded. One possible use case is to display a loading indicator. For example, if you have a loading gif in your theme's search form:
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" value="<?php echo get_search_query(); ?>" name="s">
</label>
<input type="submit" value="Search">
<img src="<?php echo esc_url( get_theme_file_uri( 'images/loading.gif' ) ); ?>" width="32" height="32" class="loading-indicator">
</form>
You could display the loading gif while suggestions are being fetched with this CSS:
.loading-indicator {
display: none;
}
.is-loading .loading-indicator {
display: block;
}