JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="screen">
	<ul>
		<li><b>No Print</b>..Don't print anything before the following search box</li>
		<li><b>No Print</b>..No headers, graphics, Ads or anything else before the search box and its results</li>
	</ul>
	<form class="printForm">
		<div id="printReady">
			<div class="autocompleter">
				<label>Recipé: </label>
				<input type="search" placeholder="&#x1f50d; Search Box Type here, Then Click Print!" name="tryit" data-using="tryit"/>
				<div class="description">&nbsp;</div>
			</div>
		</div>
		<input id="printRecipe" type="button" value="Print this Recipe">
	</form>
	<ul>
		<li><b>No Print</b>..Don't print anything After the search box and its results</li>
		<li><b>No Print</b>..No footers, graphics, Ads or anything else After the search box and its results</li>
	</ul>
</div>
<div id="print">
	<h2>Recipé: <span></span></h2>
	<p><b>Print Intro: You should see this only on the printed page.</b></p>
	<p class="description">&nbsp;</p>
	<p><b>Print Footer: You should see this only on the printed page.</b></p>
</div>

CSS

@media screen {
	#screen {
		display: block;
	}
	#print {
		display: none;
	}
	form {
		padding: 10px;
		border: 1px solid #999;
	}
	.ui-autocomplete-input {
		width: 300x;
	}
	.autocomplete-project label {
		display: block;
		font-weight: bold;
		font-family: Verdana, Arial, sans-serif;
		font-size: 14px;
		margin-bottom: 1em;
	}
	.autocomplete-project .description {
		margin: 0;
		padding: 0;
	}
	.ui-autocomplete-input {
		width: 200px;
		max-height: 200px;
	}
	.autocomplete-project p, .autocomplete-project label {
		display: inline
	}
	.ui-autocomplete {
		max-height: 250px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
		/* add padding to account for vertical scrollbar */
		padding-right: 20px;
	}
	.autocompleter p,
	.autocompleter label {
		display: inline
	}
	.description {
		margin: 10px 0
	}
	.description ol {
		margin: 0
	}
}
@media print {
	#screen {
		display: none;
	}
	#print {
		display: block;
	}
}

JavaScript

$(function() {
	var autocompleter = {
		tryit: [{
			value: 'Pudding surprise!',
			label: 'Type then Select...,',
			desc: '<p>You should see the autocomplete value and this text:</p><ol><li>on screen</li><li>on the printed page</li></ol><p>Other on-screen elements will not be printed.</p>'
		}]
	};
	$(document).on('click', '.ui-menu-item-wrapper a[target]', function() {
		return false;
	});
	$('.autocompleter').each(function() {
		var input = $('input', this);
		var data = input.data('using');
		var ac = autocompleter[data];
		if(!ac) {
			throw new Error("autocompleter using '" + data + "' is not defined");
		}
		input.autocomplete({
			minLength: 0,
			source: ac,
			open: function(event, ui) {
				$(this).autocomplete('widget').position({
					my: 'left top',
					at: 'right+10 top',
					of: input
				}); // move it to the side.
			},
			focus: select,
			select: select
		}).autocomplete('instance')._renderItem = function(ul, item) {
			return $('<li><div>' + item.label + '<br/>' + item.desc + '</div></li>').appendTo(ul);
		};
		function select(event, ui) {
			$(this)
			.val(ui.item.label)
			.next().html(ui.item.desc);
		}
	});
	$('#printRecipe').on('click', function() {
		// Here dynamically populate the #print div with content ...
		var acValue = $("input[name='tryit']", '#screen').val();
		var description = $("div.description", '#screen').html();
		$('h2 span', '#print').text(acValue);
		$('p.description', '#print').html(description);
		// ... then print
		window.print();
	});
});