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');