Add filter to autosuggest fetch config

.wp-env.json

@@ -17,6 +17,7 @@
         "wp-content/mu-plugins/unique-index-name.php": "./tests/cypress/wordpress-files/test-mu-plugins/unique-index-name.php",
         "wp-content/plugins/cpt-and-custom-tax.php": "./tests/cypress/wordpress-files/test-plugins/cpt-and-custom-tax.php",
         "wp-content/plugins/custom-instant-results-template.php": "./tests/cypress/wordpress-files/test-plugins/custom-instant-results-template.php",
+        "wp-content/plugins/custom-headers-for-autosuggest.php": "./tests/cypress/wordpress-files/test-plugins/custom-headers-for-autosuggest.php",
         "wp-content/plugins/fake-new-activation.php": "./tests/cypress/wordpress-files/test-plugins/fake-new-activation.php",
         "wp-content/plugins/open-instant-results-with-buttons.php": "./tests/cypress/wordpress-files/test-plugins/open-instant-results-with-buttons.php",
         "wp-content/plugins/unsupported-server-software.php": "./tests/cypress/wordpress-files/test-plugins/unsupported-server-software.php",

assets/js/autosuggest/index.js

@@ -187,7 +187,7 @@ function buildSearchQuery(searchText, placeholder, { query }) {
  * @returns {object} AJAX object request
  */
 async function esSearch(query, searchTerm) {
-	const fetchConfig = {
+	const fetchOptions = {
 		body: query,
 		method: 'POST',
 		mode: 'cors',
@@ -198,23 +198,35 @@ async function esSearch(query, searchTerm) {
 
 	if (epas?.http_headers && typeof epas.http_headers === 'object') {
 		Object.keys(epas.http_headers).forEach((name) => {
-			fetchConfig.headers[name] = epas.http_headers[name];
+			fetchOptions.headers[name] = epas.http_headers[name];
 		});
 	}
 
 	// only applies headers if using ep.io endpoint
 	if (epas.addSearchTermHeader) {
-		fetchConfig.headers['EP-Search-Term'] = encodeURI(searchTerm);
+		fetchOptions.headers['EP-Search-Term'] = encodeURI(searchTerm);
 	}
 
 	// only add a request ID if using ep.io endpoint
 	const requestId = generateRequestId(epas?.requestIdBase || '');
 	if (requestId) {
-		fetchConfig.headers['X-ElasticPress-Request-ID'] = requestId;
+		fetchOptions.headers['X-ElasticPress-Request-ID'] = requestId;
 	}
 
 	try {
-		const response = await fetch(epas.endpointUrl, fetchConfig);
+		/**
+		 * Filter the Elasticsearch fetch options used for Autosuggest.
+		 *
+		 * @filter ep.Autosuggest.fetchOptions
+		 * @since 4.5.1
+		 *
+		 * @param {object} fetchOptions Options.
+		 * @returns {object} Options.
+		 */
+		const response = await fetch(
+			epas.endpointUrl,
+			applyFilters('ep.Autosuggest.fetchOptions', fetchOptions),
+		);
 
 		if (!response.ok) {
 			throw Error(response.statusText);

tests/cypress/integration/features/autosuggest.cy.js

@@ -3,6 +3,10 @@ describe('Autosuggest Feature', () => {
 		cy.wpCli('elasticpress sync --setup --yes');
 	});
 
+	beforeEach(() => {
+		cy.deactivatePlugin('custom-headers-for-autosuggest', 'wpCli');
+	});
+
 	it('Can see autosuggest list', () => {
 		cy.visit('/');
 
@@ -63,6 +67,28 @@ describe('Autosuggest Feature', () => {
 			});
 	});
 
+	it('Can see post in autosuggest list when headers are modified', () => {
+		cy.activatePlugin('custom-headers-for-autosuggest', 'wpCli');
+		cy.visit('/');
+
+		cy.intercept({
+			url: /(_search|autosuggest)$/,
+			headers: {
+				'X-ElasticPress-Request-ID': 'CustomRequestId123',
+			},
+		}).as('apiRequest');
+
+		cy.get('.wp-block-search__input').type('Markup: HTML Tags and Formatting');
+
+		cy.wait('@apiRequest');
+
+		cy.get('.ep-autosuggest').should(($autosuggestList) => {
+			// eslint-disable-next-line no-unused-expressions
+			expect($autosuggestList).to.be.visible;
+			expect($autosuggestList[0].innerText).to.contains('Markup: HTML Tags and Formatting');
+		});
+	});
+
 	it('Can use autosuggest navigate callback filter', () => {
 		cy.activatePlugin('filter-autosuggest-navigate-callback', 'wpCli');
 

tests/cypress/wordpress-files/test-plugins/custom-headers-for-autosuggest.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * Plugin Name: Custom Header for Autosuggest
+ * Description: Customizes the headers using fetchOptions.
+ * Version:     1.0.0
+ * Author:      10up Inc.
+ * License:     GPLv2 or later
+ *
+ * @package ElasticPress_Tests_E2e
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function() {
+		wp_add_inline_script(
+			'elasticpress-autosuggest',
+			"const epAutosuggestFetchOptions = (fetchOptions) => {
+				fetchOptions.headers['X-ElasticPress-Request-ID'] = 'CustomRequestId123';
+				return fetchOptions;
+            };
+            wp.hooks.addFilter('ep.Autosuggest.fetchOptions', 'myTheme/epAutosuggestFetchOptions', epAutosuggestFetchOptions);",
+			'before'
+		);
+	},
+	11
+);