Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move default autosuggest selectors definition so they can be filtered. #2181

Merged
merged 4 commits into from
May 6, 2021
Merged

Move default autosuggest selectors definition so they can be filtered. #2181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
950a7cb
Move default autosuggest selector definition so they can be filtered.…
JakePT Apr 21, 2021
a74d2d7
Add `ep_autosuggest_default_selectors` filter and more gracefully han…
JakePT Apr 21, 2021
cc550cb
Add default selectors filter info.
JakePT Apr 21, 2021
0dba469
Add @since to docblock for new hook, and tweak order of selectors.
JakePT May 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions assets/js/autosuggest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -385,9 +385,13 @@ function setFormIsLoading(isLoading, input) {
* init method called if the epas endpoint is defined
*/
function init() {
const epInputNodes = document.querySelectorAll(
`.ep-autosuggest, input[type="search"], .search-field, ${epas.selector}`,
);
const selectors = [epas.defaultSelectors, epas.selector].filter(Boolean).join(',');

if (!selectors) {
return;
}

const epInputNodes = document.querySelectorAll(selectors);

// build the container into which we place the search results.
// These will be cloned later for each instance
Expand Down
2 changes: 1 addition & 1 deletion dist/js/autosuggest-script.min.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions docs/theme-integration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@

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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/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()`](https://developer.wordpress.org/reference/functions/__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:
Expand Down
9 changes: 9 additions & 0 deletions includes/classes/Feature/Autosuggest/Autosuggest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,15 @@ public function enqueue_scripts() {
'placeholder' => $query['placeholder'],
'endpointUrl' => esc_url( untrailingslashit( $endpoint_url ) ),
'selector' => empty( $settings['autosuggest_selector'] ) ? 'ep-autosuggest' : esc_html( $settings['autosuggest_selector'] ),
/**
* Filter autosuggest default selectors.
*
* @hook ep_autosuggest_default_selectors
* @since 3.6.0
* @param {string} $selectors Default selectors used to attach autosuggest.
* @return {string} Selectors used to attach autosuggest.
*/
'defaultSelectors' => apply_filters( 'ep_autosuggest_default_selectors', '.ep-autosuggest, input[type="search"], .search-field' ),
'action' => 'navigate',
'mimeTypes' => [],
/**
Expand Down