Printing values of jquery custom autocomplete

[Luke_4]

My code is here https://jsfiddle.net/yqjuy3m1/1/ .. I know my print html is out dated (could be my issue) so any updated approach is welcome.
What I am trying to do is, when the print button is clicked,

1. Keep the selected value in the search box at print, along with the outside description.
2. There is a placeholder in the search box. When you type in and you select a value (the only value that returns), and then click the print button..., it takes you to the print page. However, the search box returns to the default search placeholder and I just want the selected value and the description that goes with it to print. I hope this makes sense.
3. I have notice also that the search box is also active in the print window too. meaning that you can type in the box while your on the printing page. Not sure if we can get around tha but like it if possible.
   Edit:
   4.I should also point out that I want to be able to have more than one autocomplete in a single print job.
   Thank you for your help
   End Edit

[Airshow]

The days of generating a special page for print purposes are long gone.

Instead of composing HTML on the fly, try mastering CSS @media rules :

• https://www.w3.org/TR/WD-css2/media.html

If there's going to be any dynamically generated content, you will still need some javascript; but more typically @media rules alone allow you to specify a "print" version of a "screen" page.

I admit, I've never tried @media with an autocomplete element but can't immediately see any reason why it should not be successful. From what I understand, it's more about not printing the rest of the page.

[Luke_4]

@Airshow
Yep, this is what I am trying to learn. My prob is that I hit dead ends due to jquery's autocomplete. Everything works great at print, except the final display of the box . I don't know enough about @media or jquery to retain the results of search box.

Forgot to say that I found this post http://stackoverflow.com/questions/27643569/jquery-hide-show-dont-play-well-with-media-print ..., which is close, but again, I don't know how to set it up with the jfiddle I have ( https://jsfiddle.net/yqjuy3m1/1/ ).
I don't understand it enough yet to know where the elements go in the code.
Guess I keep chuggin... Thanks for trying

[Airshow]

@Luke_4,

It's very odd that printing is not WYSIWYG.

Theory 1: (Physical) .autocomplete() creates the widget by replacing the original input element and/or creating one or more hidden elements. You may need to find some element other than the obvious one, which holds the final string, and establish an @media print rule that shows only that element. Use your browser's console to inpect the DOM.

Theory 2: (Temporal) It's a matter of timing. You may need to issue some command on the widget and/or wait for some widget event before printing. Have a look at autocomplete's API documentation for clues.

[Luke_4]

@Airshow
I think you are correct on your points. I came here looking for examples of @media layout and structure to go by (css and the rest of the code which completes a print job). I would love it if someone could offer a layout of a standard @media print layout (not just the css part) which would do a print example... Don't know why, but I can't find a simple layout.
Okay so, Below is a link and code snip of what I believe could be my answer, yet I have no Idea how to structure it to work with the fiddle I put together https://jsfiddle.net/yqjuy3m1/1/ I knew I had to modernize my print structure to handle jquery autocomplete. but I hardly understand the print setup I am currently using..., but I am learning..., slowly.

I'm hoping someone can look at the following post and offer something to go by (I don't mind learning if I simply had a working example) . The post is regarding using "form" but it feels like autocomplete could be used inplace of the form. I believe, with some tweaking, this could answer the question. In the mean time, I will go to the jquery forum to see if there is something there.
This post https://www.daniweb.com/programming/web-development/threads/277601/printing-values-entered-to-a-edit-form
...and here's the snippet of that same code.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <script type="text/javascript">

    function Clickheretoprint()
    { 
      var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
      disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; 
      //Reading the form elements value
      var content_vlue = document.myform.yourname.value; 

      var docprint=window.open("","",disp_setting); 
       docprint.document.open(); 
       docprint.document.write('<html><head><title>Print Results</title>'); 
       docprint.document.write('</head><body  onLoad="self.print()"><center>');          
       docprint.document.write(content_vlue);          
       docprint.document.write('</center></body></html>'); 
       docprint.document.close(); 
       docprint.focus(); 

    }
    </script>
     </head>
     <body>
     <form name="myform" method=post action="">
        <input type="text" name="yourname" value="">
        <input type="button" value="Test" onclick="Clickheretoprint()">
     </form>  
     </body>
    </html>

[diafol]

Well taking bits from your jsfiddle:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="stylesheet" href="">
    <style> /* this can go into a css file*/
        .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 label
        {
            display: block;
            font-weight: bold;
            font-family: Verdana,Arial,sans-serif;
            font-size: 10px;
            margin-bottom: 1em;
        }

        .autocomplete-project .description
        {
            margin: 0;
            padding: 0;
        }
        .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 label
        {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
        }

        .autocompleter .description
        {
            margin: 0;
            padding: 0;
        }
        .autocompleter p, .autocompleter label{display:inline}

        @media print {
            /*
            #elements, #to, #hide {
                display: none;
            }
            */
            form.printForm {
                display: block;
            }

            .printForm input[type="button"]{
                display: none;
            }
        }
    </style>

    <!--  required in the head, only once for all class=autocompleter-->
    <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>
</head>
<body>

<!--  end of required in the head  for all class=autocompleter-->
<form class="printForm">
    <div id="printReady">
        <div class="autocompleter">
            <label> When you see a </label>
            <input type=search placeholder="&#x1f50d; Search Box Type here, 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: "Search box, type & select",
                label: "Type then Select...,",
                desc: "<ol> <h3>When you clicked print did you notice</h3> <li> the search box went back to the original placeholder?</li> <li>The magnifying glass went away</li> <li> I need the print to keep the selected text (results of the search)</li></ol>",
            }
        ];
    </script>
</body>
</html>

When you add this little bit and take out all the create new document stuff:

        @media print {
            /*
            #elements, #to, #hide {
                display: none;
            }
            */
            form.printForm {
                display: block;
            }

            .printForm input[type="button"]{
                display: none;
            }
        }

It works for me. I haven't cleaned anything else up.

[Luke_4]

@diafol
You hit it! That works (I need to clean it up but it works)... only prob now is that it prints the entire web page. is there an @media to only print the information shown?
will be looking for it but will take any help offered.

[Luke_4]

@diafol,
If I could give you 100 upvotes I would do it. Thanks!
I hope you have an @media for restricting the print to just the results. I don't know how to give more donation for you... Big THANKS

[diafol]

Hey no worries. However share the love with Airshow :)

There is no foolproof way of doing a "hide all but this" method that I know of. If you hide an element you can only display a direct child or so I.m led to believe. However I get difficulty in getting this to work. A work around would be to place all nonprinting areas in a "noprint" class and then set this to display none in css.

[gentlemedia]

I use the @media print styles from HTML5 Boilerplate in my default CSS file. Perhaps it can come in handy for you too.

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

[Airshow]

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.

[Luke_4]

@diafol, in the code you offered (which worked)..., what did you mean by "take out all the create new document stuff" (above @media code just at the end of your html) where you wrote,

When you add this little bit and take out all the create new document stuff:

I will look back here for a response, but all in all you guys have answered my OP and a fine job too. Just want to say thanks to all you guys for the help. Plus I forgot to click the Solved button.

As for the other question (which I shold have started another post with)

is there an @media to only print the information shown?

@Airshow I appreciate your input. You offer approach in your answers so I added them to my road map for guidance.
@gentlemedia Thanks for the @media list. I will be referring to it as I proceed.
Thanks everyone!

[diafol]

I meant the docprint open and write stuff.

[Luke_4]

Okay diafol, thank you again

[Luke_4]

@Airshow
any chance you could elaborate on that two child divs concept?
here's my attempt but it didn't work. something is wrong with my css...
https://jsfiddle.net/59rphg1h/1/

There's a new question regarding it over here https://www.daniweb.com/programming/software-development/threads/506950/printing-parts-of-web-page-none-before-or-after
Thanks for your help

[Airshow]

Try this - https://jsfiddle.net/59rphg1h/9/

[Anuradha_1]

@Luke_4 Nice discussion and good solution

[Luke_4]

@Airshow.. Somehow I overlooked your reply until now. Christmas just happened! I hope you know that. Words will never say enough how much I appreciate you right now! Thank you so much for your coming back to help me.

[Luke_4]

@Anuradha_1 Thank you!
Was a challenge indeed. jQuery is a different animal (probably ccuz I'm just learning). BUT, I/we have these wonderful folks here at Daniweb to thank though. They knocked out what others went "deer in the headlights" on. Thanks Everyone for your help! Totally awesome!
Happy New Year!

[Airshow]

@Luke_4, no worries. As you probably already discovered, that pattern is totally flexible. Once you have grasped the basic idea, you can "play tunes" with it to control the content/layout to print whatever you want.

Good luck.

Airshow

[Luke_4]

@Airshow, love that "play tunes" with it :)
... just out of curiosity, and because I think I am not getting the full scope of your work yet. I use to be able to pull the css and script out and put into head... Then I only need put the div's in the body tags. When I try it now it doesn't work so well.
I assumed the way it is laid out in the jsfiddle would be enough, but for some reason I have to have all of it on the page in order to make it work.
I am Sure I am wrong about something, just can't see it yet.
Any chance you could show me what to put into the head, css and what should stay in body?

[Luke_4]

@Airshow, I think I may have found a glitch (or not). It appears I went from the pan to the fire.
What I mean is that before I came here to Daniweb, I created autocomplete(s) that had the ability to use multiples at a time on one page without interferring with the other autocomplete boxes on the same page. I just couldn't get the recipe to print separately (what brought me here).
This is a lot to ask and I'm taken back by the fact that I have to ask again for help on what I thought was fixed.
Have a look at this jsfiddle and you will see what I mean. https://jsfiddle.net/gj47frrL/1/
I'm finding now that I am able to print the recipe, what you did for me, but now can't keep them ( autocomplete ) separate as they are in the fiddle. Now one goes into the other when data is changed. Yikes!
Really, I apologize because I failed to mention that I needed multiple autocompletes on one page and only print the one (recipes).
I was able to keep them separate before (just couldn't print) and really thought I could differentiate them on the page once print was achieved. Turns out I don't know how to do that now.

I know this is very different way to use autocomplete but I really need to be able to make a recipe for a page and also include a totally different search box for something else on the same page..., without either autocomplete being affected by the other.

Is there a way to print the last one called "Select an add-in:" (and use it for various recipes) on other pages, without printing the others.
So let's say on the same page as the recipe, there is another one called "meals". But I only want the user to be able to print the recipe...
I would not need to print the others, just the autocomplete with recipes.

[Luke_4]

You know, I appologize. The question here has been answered well enough. Here's to a new question Click Here.
Thank you for all you guys do here!