Star
You must be signed in to star a gist
WordPress Search Autocomplete using admin-ajax.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Enqueue scripts and styles. | |
* | |
* @since 1.0.0 | |
*/ | |
function ja_global_enqueues() { | |
wp_enqueue_style( | |
'jquery-auto-complete', | |
'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.css', | |
array(), | |
'1.0.7' | |
); | |
wp_enqueue_script( | |
'jquery-auto-complete', | |
'https://cdnjs.cloudflare.com/ajax/libs/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js', | |
array( 'jquery' ), | |
'1.0.7', | |
true | |
); | |
wp_enqueue_script( | |
'global', | |
get_template_directory_uri() . '/js/global.min.js', | |
array( 'jquery' ), | |
'1.0.0', | |
true | |
); | |
wp_localize_script( | |
'global', | |
'global', | |
array( | |
'ajax' => admin_url( 'admin-ajax.php' ), | |
) | |
); | |
} | |
add_action( 'wp_enqueue_scripts', 'ja_global_enqueues' ); | |
/** | |
* Live autocomplete search feature. | |
* | |
* @since 1.0.0 | |
*/ | |
function ja_ajax_search() { | |
$results = new WP_Query( array( | |
'post_type' => array( 'post', 'page' ), | |
'post_status' => 'publish', | |
'nopaging' => true, | |
'posts_per_page'=> 100, | |
's' => stripslashes( $_POST['search'] ), | |
) ); | |
$items = array(); | |
if ( !empty( $results->posts ) ) { | |
foreach ( $results->posts as $result ) { | |
$items[] = $result->post_title; | |
} | |
} | |
wp_send_json_success( $items ); | |
} | |
add_action( 'wp_ajax_search_site', 'ja_ajax_search' ); | |
add_action( 'wp_ajax_nopriv_search_site', 'ja_ajax_search' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* globals global */ | |
jQuery(function($){ | |
var searchRequest; | |
$('.search-autocomplete').autoComplete({ | |
minChars: 2, | |
source: function(term, suggest){ | |
try { searchRequest.abort(); } catch(e){} | |
searchRequest = $.post(global.ajax, { search: term, action: 'search_site' }, function(res) { | |
suggest(res.data); | |
}); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form class="navbar-form" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>"> | |
<div class="form-group"> | |
<input type="text" name="s" class="form-control search-autocomplete" placeholder="Search"> | |
</div> | |
<button type="submit" class="fa fa-search"></button> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment