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.

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

Add epAutosuggestQueryFilter to allow filtering ES query based on input element #2909

Merged
merged 1 commit into from
Jul 27, 2022

Conversation

johnwatkins0
Copy link
Member

@johnwatkins0 johnwatkins0 commented Jul 26, 2022

Description of the Change

Currently there is no easy way to filter an autosuggest query based on context. So in the case where you have a global autosuggest input on a page, there's no way to place a secondary autosuggest search on the same screen that covers, e.g., posts with a certain taxonomy term.

This follows the model of the existing filters, epDataFilter and epAutosuggestItemHTMLFilter to allow the ElasticSearch query to be modified before it is sent. We check if epAutosuggestQueryFilter is defined, and if it is, the query is passed through that function. The function also receives the searchText and the input element, the latter of which is key to customizing the query, as we can identify an input by its attributes or even access its form at input.form.

Closes #2908

Note: I didn't look into using @wordpress/hooks because my assumption is that package would bring in unwanted dependencies. If this option is pursued in the future, though, this functionality could be easily adapted. In that scenario I would recommend breaking each of these filters out into helper functions that can keep the current pattern for backward compatibility and fall back to the @wordpress/hooks pattern if the global function isn't defined.

How to test the Change

  1. Checkout this branch and run npm run build or npm run watch
  2. Go to a page with autosuggest
  3. Enter the following in the JS console
window.epAutosuggestQueryFilter = (query, searchText, input) => {
    console.log({query, searchText, input});
    return query;
}
  1. Type in the autosuggest input to see your callback running.

Changelog Entry

Added - Autosuggest: filter the autosuggest ElasticSearch query by defining a window.epAutosuggestQueryFilter() function in JavaScript.

Credits

Checklist:

  • I agree to follow this project's Code of Conduct.
  • I have updated the documentation accordingly.
  • I have added tests to cover my change.
  • All new and existing tests pass.

@johnwatkins0 johnwatkins0 self-assigned this Jul 26, 2022
@felipeelia felipeelia added this to the 4.3.0 milestone Jul 27, 2022
@felipeelia felipeelia merged commit 948b654 into develop Jul 27, 2022
@felipeelia felipeelia deleted the feature/2908-filter-autosuggest-query branch July 27, 2022 12:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a filter to allow modifying the Autosuggest query
3 participants