Add autosuggest to dynamically loaded input fields

[felipeelia]

Is your enhancement related to a problem? Please describe.

Currently, autosuggest only works with input fields already in the DOM. For inputs dynamically added at a later time, via JavaScript, autosuggest won't work.

Describe the solution you'd like

It would be great if we could (1) retrigger the autosuggest init function OR (2) change the way autosuggest works, instead of adding the behavior to each field, adding it to the document body, checking which element started the event (props to @JakePT for this idea.)

Describe alternatives you've considered

As a workaround, it seems users wanting to have this working with the current codebase could add the .js dynamically later.

[felipeelia]

This is an example of the workaround mentioned in the issue description:

/**
 * Avoid outputting the `<script>` tag but don't prevent EP of creating
 * the `epas` object through `wp_localize_script()`
 */
add_filter(
	'script_loader_tag',
	function( $script, $handle ) {
		if ( 'elasticpress-autosuggest' === $handle ) {
			$script = '';
		}
		return $script;
	},
	10,
	2
);

/**
 * After the DOM is loaded create a new form with an input (autosuggest inputs need to be inside a form).
 * After that, add the Autosuggest JS to the DOM. Weighting here is `999` so autosuggest's `epas` object
 * is already created.
 */
add_action(
	'wp_footer',
	function() {
		if ( ! defined( 'EP_URL' ) ) {
			return;
		}
		?>
		<script>
			document.addEventListener("DOMContentLoaded", function() {
				// Create a form with an input inside of it.
				var form = document.createElement('form'),
					input = document.createElement('input');
				input.type = 'search';
				form.appendChild(input);
				document.getElementById('masthead').appendChild(form);

				// Dynamically load the autosuggest JS
				var s = document.createElement( 'script' );
				s.setAttribute( 'src', '<?php echo esc_url( EP_URL . 'dist/js/autosuggest-script.min.js?ver=' . EP_VERSION ); ?>' );
				document.body.appendChild( s );
			});
		</script>
		<?php
	},
	999
);