JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

<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
                })
  ...