0

Thanks to Sally CJ I am super close to having everything figured out with an autocomplete search I am building out. The only problem I am having is the back button is not working after the user is taken to their new page (based on what they chose from the dropdown / autocomplete box). Sometimes the back button is simply greyed out and other times it will take the user to what seems like a random page (or whatever page they visited 2-3 pages prior).

Below is my full code, any suggestions for a fix would be greatly appreciated. I'm guessing it has something to do with window.location.replace(permalink) but not completely sure.

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

/**
 * Enqueue ui styles
 */
function theme_enqueue_styles() {
    // Enqueue jQuery UI themed styles.
    wp_enqueue_style( 'jquery-ui-redmond-core', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css', array(), null );
    wp_enqueue_style( 'jquery-ui-redmond-theme', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 

/**
 * 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 );
                $source[$k]['value'] = '';
            }

    ?>

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

    </script> 

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

simple fix, changed to: window.location.href = (permalink);

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.