How to install 2 site searches on 1 page

[eshannon3 (Elaine)]

We have had two separate Swiftype engines installed on one page for several years. The support team provided the code we are using, which is a modification on the standard embed code. The good part is that autocomplete works on both engines. Unfortunately, full search only works on one - the engine where full search results load in a modal. For the other engine, where users are redirected to a separate page, they are getting redirected to the wrong URL and so the results never load.

The code we are using:

<script>
// search install code
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
// Program search install 
_st('install','redacted','2.0.0', {
	  install: {
		web: {
		  ui: {
			search: {
			  results_display: {
				disable_anchor_hash_params: true
			  },
			  query_composer: {
				disable_anchor_hash_params: true
			  }
			}
		  }
		}
	  }
	});
// Main search install
_st('install','redacted','2.0.0');
</script>

I reached out to the Swiftype support email address this week, and they said that since installing 2 engines on 1 page is not a standard configuration, they don't really support it. They did notice the same issue I noticed, though, which is that instead of full search results being located at

http://example.com/search-results/#stq=keyword&stp=1

the results are trying to load at

http://example.com/search-results/#stq-1=keyword&stp-1=1

The support team suggested "something" is adding the "-1" which causes results not to load, so I created a very stripped-down HTML file that I placed on a completely separate server, on a separate host, to ensure that no server redirects were happening, and none of the JS and CSS that comes from our site were interfering. So, only jQuery and the same install code as above were loading. I got the same results: autocomplete works on both engines, full search results load for Program Search in a modal, but full search results for the Main Search engine lead to a URL with the extra "-1" and so they never load. So I can only conclude that Swiftype's own code is somehow appending this to try to differentiate between the queries.

I've also tried having both engines load results in a modal; having both engines load results on a separate page; changing the code above so the "results_display" and "query_composer" etc. are also passed to the main search install; and using the jQuery implementation instead. I am open to the jQuery option but have not found full enough documentation to get it fully working. If I use the following code, autocomplete works for both engines, but neither engine returns results - there's no documentation for parameters to show how to load results in a modal, and even if both engines are set to load on a separate page, results never load - I'm not sure what code is missing to make the results display on that separate page.

(jQuery is loaded, then jquery.swiftype.autocomplete.js, then jquery.ba-hashchange.min.js, then jquery.swiftype.search.js, just as on the GitHub examples.)

(function($) {
	$(document).ready(function(){
		// program autocomplete and search
		$("#st-program-search").swiftype({engineKey: "redacted"});
		$(".programSearch .search-container").submit(function(event) {
			event.preventDefault();
			var query = $("#st-program-search").val();
			window.location = "/search-results/#stq=" + query;
		});
		// main autocomplete and search
		$("#st-global-search").swiftype({engineKey: "redacted"});
		$("header .search-container").submit(function(event) {
			event.preventDefault();
			var query = $("#st-global-search").val();
			window.location = "/search-results/#stq=" + query;
		});
	})
})(jQuery);

The support team noted that someone else has had this issue before - Multiple Swiftype search boxes - different behaviour - #9 by ken - Swiftype Community Forums - but that thread was never resolved other than people agreeing that jQuery should be used. Can anyone help me sort out a way to have both autocomplete and full search work for two engines on a single URL, even if I have to load full results the same way (either a modal or separate page) for both engines?

[eshannon3 (Elaine)]

I found a solution through trial and error.

First, we removed the scripts from Google Tag Manager and served everything locally.

Second, we wrapped the individual engine install code inside a doc.ready function. So, our final working code - with both engines autocompleting and presenting full search as desired - looks like this:

<script type='text/javascript'>
	// Standard install code
	(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
			(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
			e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
		})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
	(function($) {
			$(document).ready(function(){
				// Search engine 2, with full results in a modal
				_st('install','redacted','2.0.0', {
					install: {
						web: {
						ui: {
							search: {
							results_display: {
								disable_anchor_hash_params: true
							},
							query_composer: {
								disable_anchor_hash_params: true
							}
							}
						}
						}
					}
				});
			})
		})(jQuery);
	// Search engine 1, with full results on a separate page
	_st('install','redacted','2.0.0');
</script>

Something about the combination of removing GTM and placing part of the JS inside a doc.ready function ensured that everything fires successfully, and for some reason prevents the issue where "-1" was being appended to the full search results URL.