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', '.12.1/themes/redmond/jquery-ui.min.css', array(), null );
wp_enqueue_style( 'jquery-ui-redmond-theme', '.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' );
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/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css', array(), null );
wp_enqueue_style( 'jquery-ui-redmond-theme', 'https://cdnjs.cloudflare/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' );
1 Answer
Reset to default 0simple fix, changed to: window.location.href = (permalink);