Trying to get just the search results (inside and outside the search box). Everything else on the page, which is NOT involved with the search box and its results, should not print.
Tried many types of @media and css but can't seem to find the answer. I may be doing something wrong with what I already have.
Here's the Fiddle https://jsfiddle.net/bfca3ssc/
here's the code:
<style> /* this can go into a css file*/
@media print {
/*
#elements, #to, #hide {
display: none;
}
*/
form.printForm {
display: block;
}
.printForm input[type="button"]{
display: none;
}
}
.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: 300px;
max-height: 200px;
}
.autocomplete-project p, .autocomplete-project label{display:inline}
.ui-autocomplete {
max-height: 300px;
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}
</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var autocompleter={};
$(function() {
$(document).on("click",".ui-menu-item-wrapper a[target]",function(){
return false
})
$(".autocompleter").each(function() {
var input = $("input",this);
var ac=autocompleter[ input.data("using") ];
if (!ac) throw "autocompleter using '"+input.data("using")+"' is not defined"
console.log(input.data("using"),ac);
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>")
.append("<div>" + item.label + "<br>" + item.desc + "</div>")
.appendTo(ul);
};
function select(event, ui) {
$(this).val(ui.item.label);
$(this).next().html(ui.item.desc);
}
})
});
</script>
<ul>
<li><b>No Print</b>..Don't print anything before the following search box</li>
<li><b>No Print</b>..No graphics, Ads or anything else before the search box and its results</li>
</ul>
<form class="printForm">
<div id="printReady">
<div class="autocompleter">
<label> When you Print </label>
<input type=search placeholder="🔍 Type here, Select, Then Click Print!" name="tryit" data-using="tryit">
<p class="content"> </p>
</div>
</div>
<input type="button" onClick="window.print();" value="Print this Recipe">
</form>
<script>
autocompleter.tryit = [
{
value: "Print this display too!",
label: "Type then Select...,",
desc: "<ol> <h3>When you clicked print, how can I:</h3> <li> keep this for print, and eliminate everything else on the page?</li> <li>Make it so others can print this out like a food recipe -- i.e. Just ingredients, Directions</li> <li> Lastly, I need the print job to keep the selected text (results of the search) which says --Print this display too!--</li></ol>",
}
];
</script>
<ul>
<li><b>No Print</b>..Don't print anything After the search box and its results</li>
<li><b>No Print</b>..No graphics, Ads or anything else After the search box and its results</li>
</ul> 
