functions - wp_footer hook causing text to show on bottom of page

The below function is causing the resulting options to display on the bottom of the page (under the footer area) when the search bar is activated / being used. Oddly enough, it seems like this is by design in some way because its not code that shows up, its actual text such as "There is 3 options, scroll to pick one" - if I hook into wp_head the same thing happens. Obviously this makes for terrible UX because as a user is typing in a search if they by chance scroll down there is a big goofy white block under the footer showing the options (that are already appearing in the search area where they are typing).

FULL CODE:

/**
 * Proper way to enqueue scripts.
 */
function theme_enqueue_scripts() {
    // Enqueue jQuery UI and autocomplete
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-autocomplete' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );


/**
 * Add a shortcode for autocomplete drop down
 *
 * Use: [autocomplete]
 */
function theme_autocomplete_dropdown_shortcode( $atts ) {
    return '<input type="text" name="autocomplete" id="autocomplete" value="" placeholder="start typing artist name..." />';
}
add_shortcode( 'autocomplete', 'theme_autocomplete_dropdown_shortcode' );

function theme_autocomplete_js() {
    $args = array(
        'post_type' => 'show',
        'post_status' => 'publish',
         'meta_key'  => 'deal_date',
        'posts_per_page'   => -1 // all posts
    );

    $posts = get_posts( $args );

        if( $posts ) :
            foreach( $posts as $k => $post ) {
                $source[$k]['ID'] = $post->ID;                                      
                $source[$k]['label'] = $post->post_title ." - ".  get_field('deal_date', $post->ID);        
                $source[$k]['permalink'] = get_permalink( $post->ID );
            }

    ?>

<script type="text/javascript">
        jQuery(document).ready(function($){
            var posts = <?php echo json_encode( array_values( $source ) ); ?>;

            jQuery( 'input[name="autocomplete"]' ).autocomplete({
                source: posts,
                minLength: 2,
                select: function(event, ui) {
                    var permalink = ui.item.permalink; // Get permalink from the datasource

                    window.location.replace(permalink);
                    console.log(posts)
                }
            });
        });  

    </script> 

    <?php
    endif;
}
add_action( 'wp_footer', 'theme_autocomplete_js');