jquery ui autocomplete appearing at bottom of page

Question

I have a strange problem with jquery ui autocomplete, and I never noticed it before until I had to print my page.

Whenever I use jquery ui autocomplete, it puts it in the input that I am using which is what it is supposed to do, but for some reason it also puts it under the page body. You can't see it, until you go to print preview, and then it shows up. This is annoying as I need to be able to print my page without that showing.

Now I know it isn't my html missing a div or anything, because it does it on every page, and the pages are formatted quite different.

I am using jquery 3.0.0 and jquery ui v1.12.0

My input is pretty normal on most of the pages eg

<input type="text" id="searchcash" placeholder="Search by Reference or Reason" size="50" Value="">

And my jquery code is pretty standard too

$("#searchcash").autocomplete({
    source: "ajax/cash.php",
    minLength: 2,//search after two characters
        select: function(event,ui){
            $('#line_id').val(ui.item.id);  
        },
        change: function (event, ui) {
            if (!ui.item) {
                $(this).val('');
            }
        }

I wonder if anyone has come across this problem, and was able to solve it. I am wondering if changing to a newer jquery ui might solve it, but I thought I would ask first.

Answer 1

Rory put me on to the right idea, but here is the actual code to hide the autocomplete from printing at the bottom of the page.

I put this in my print.css override, and it stops it from putting the autocomplete ui at the bottom of the page.

.ui-helper-hidden-accessible{
    display:none !important;
}

I would be most interested if there was a better way of doing this, until then this will be the answer. I don't know why the autocomplete has to be at the bottom, but this solves my problem short term, but there should be a better method surely.