0

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');
  • Seems like a JS issue and not wp_footer.. The label of an autocomplete item should be a string, but you have it as an array - $source[$k]['label'] = array(...);. And add console.log(posts) to your JS code and check if the browser console shows the proper array? – Sally CJ Feb 6 at 4:16
  • ah yes, I see the array is unnecessary - fixed that, but same issue is occurring. Everything is pulling in perfectly, but as soon as you start typing a few letters in the search bar, a huge white block appears under the footer the re-iterates the options (based on what user is typing in). no errors in console btw. – James Feb 6 at 4:24
  • Have you enqueued the autocomplete styles? And what happens if you rename the select to select2 - just a quick way to disable the event's callback. Try also adding an empty value - $source[$k]['value'] = '';. – Sally CJ Feb 6 at 4:45
  • I updated my post to include full code. No changes when using select2 - same with empty value. One thing I noticed is if I get rid of wp_enqueue_script( 'jquery-ui-core' ); - there is no changes either and everything still works (well, works as in the way it is currently), maybe there is an issue loading jquery-ui-core ? – James Feb 6 at 4:57
  • You haven't enqueued the autocomplete styles.. Check kero's answer here - see the code in the public function enqueue_styles(). – Sally CJ Feb 6 at 5:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.