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="&#x1f50d; Type here, Select, Then Click Print!" name="tryit" data-using="tryit">
                <p class="content">&nbsp;</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>       

@rproffitt
Yep, that's what I am studying, but I am not there for scrutiny yet, right or wrong.
Let me me show you two ways I have tried. Really hoping for an example though. Have a look at this fiddle https://jsfiddle.net/yqjuy3m1/3/ ...
It has two print buttons...

  1. Print Button1 will print what is inside the search box (what I want). However, It also prints the entire page (what I don't want).
  2. Print Button2 actually removes the rest of the page (what I want). However, It also removes the "Value" from within the search box (what I don't want).
    ....It just seems to me like there would be a way to bring the two (do wants) together in one print button.

Airshow helped with getting the Values to show in the print... here: https://www.daniweb.com/programming/web-development/threads/506905/printing-values-of-jquery-custom-autocomplete#
I have read what Airshow wrote (I just don't know how to set it up) and also gave me a Great pointer for the printing which includes...
"*An approach (not the only one) would be to have two main child divs within your <body></body> tags

`<div id="screen"> </div> styled to be displayed under @media screen and hidden under @media print.`
<div id="print"></div> styled to be displayed under @media print and hidden under @media screen.

When the "Print" button is clicked, dynamically populate the "print" div with content drawn from the "screeen" div, before calling window.print().
I have never needed to do this but it may be the line-of-least-resistance here. I can see no reason why it could not be made to work.*"
I see what Airshow is saying, I am just not versed well enough to make it happen the way he points out.
To be honest, I need an example.

I looked at your fiddle (thanks for using that!) and didn't find the required "@media print" section noted by AirShow.

I just happened to check in before nap time so BBL.

@rproffitt
Well, Airshow didn't really have a required @media section in the question that I got help in. That question was about getting the values of the search box (when selected) to stay put after hitting the print button..., which was accomplished.
I then asked how to keep the rest of the page from being printed. Airshow gave me something to consider (see my last post above for the quote) when creating the set up using "two main child divs..." Since it was another question, I called the original Question "Answered," and then posted this question with the fiddle https://jsfiddle.net/yqjuy3m1/3/

I am starting to see Airshow's points better now, but when I try with my limited wisdom, I screw something else up... I thought the fiddle would help anyone willing to try to solve...,
So, anyone reading this question, needs to know that the problem is two fold.
I am looking to have One print button, that will print the contents of the searchbox (See Print Button1) and Only print what is within the divs of the print (See Print Button2) ... or something like it.
On one hand:

  1. <input type="button" onClick="window.print();" value="Print Button1">
    will keep the Search Value in the Box (what I want) but prints everything on the page (what I don't want).
    On the other hand:
  2. <input type="button" name="printMe" onClick="printSpecial()" value="Print Button2">
    Removes the rest of the page from print (what I want) but the search Value disappears (what I don't want)
    Thanks for trying and hope to hear back

I re-read the linked post I offered and do see where AirShow had a reply with the @media item. I think it's a long discussion so you have to pick through it all to find the details.

But "Removes the rest of the page from print (what I want) but the search Value disappears (what I don't want)"

Look up at my first reply about where I first read http://www.w3schools.com/jsref/met_win_print.asp
As long as you use that method, you have to hide all you don't want to print first, then if you want to change the view, you do that in your javascript. window.print(); does what it does so what AirShow noted works around that.

Recap. "The print() method prints the contents of the current window." means you have to put ONLY what you want to print in the current window that you want to print. AirShow's answer seems to work around this with style. Maybe you have to think over the print() method again and what it does.

Hmm, spent the past couple days mulling this over. Although I have a better understanding of css and @media , I am failing miserably and I just cannot wrap my head around this concept Airshow pointed me to:

An approach (not the only one) would be to have two main child divs within your <body></body> tags.
<div id="screen"> </div> styled to be displayed under @media screen and hidden under @media print.`
<div id="print"></div> styled to be displayed under @media print and hidden under @media screen.
When the "Print" button is clicked, dynamically populate the "print" div with content drawn from the "screeen" div, before calling window.print()

If someone could offer an example of how it is layed out, I may be able to finally see it and finalize the question.
Thank you so much for helping

Please Anyone!
This fiddle https://jsfiddle.net/59rphg1h/1/ is my attempt to perform the following concept.
Something is wrong with my css (either @media screen, print or in css in the fiddle) but I can't figure it out... what am I doing wrong?
What I am trying to do accomplish is this concept Airshow posted in another question (see below).

<style>
@media screen {
#screen {display: none;
    }
    }
    @media print {
      #print {display: block; margin-top: 0px;}
      }
</style>
Concept

<body>
<div id="screen"> styled to be displayed under @media screen and hidden under @media print </div>
<div id="print"> styled to be displayed under @media print and hidden under @media screen </div>
</body>
When the "Print" button is clicked, dynamically populate the "print" div with content drawn from the "screeen" div, before calling window.print().

I posted a link to a fiddle back in the original post

commented: Airshow!!! Thank YOU!!! It is PERFECT!!! +0

That did it Airshow... Thank you so much! Left you a message over there too... You are totally most excellent and valued in your works by this guy.
Happy New Year!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.