Last active
August 7, 2024 15:24
-
-
Save jaredatch/27c42dfdf02b20256cf7b160ab6e55db to your computer and use it in GitHub Desktop.
WordPress Search Autocomplete using WP REST API v2
This file contains hidden or 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( | |
'search_api' => home_url( 'wp-json/ja/v1/search' ) | |
) | |
); | |
} | |
add_action( 'wp_enqueue_scripts', 'ja_global_enqueues' ); | |
/** | |
* WP REST API register custom endpoints | |
* | |
* @since 1.0.0 | |
*/ | |
function ja_rest_api_register_routes() { | |
register_rest_route( 'ja/v1', '/search', array( | |
'methods' => 'GET', | |
'callback' => 'ja_rest_api_search', | |
) ); | |
} | |
add_action( 'rest_api_init', 'ja_rest_api_register_routes' ); | |
/** | |
* WP REST API search results. | |
* | |
* @since 1.0.0 | |
* @param object $request | |
*/ | |
function ja_rest_api_search( $request ) { | |
if ( empty( $request['term'] ) ) { | |
return; | |
} | |
$results = new WP_Query( array( | |
'post_type' => array( 'post', 'page' ), | |
'post_status' => 'publish', | |
'posts_per_page'=> 30, | |
's' => $request['term'], | |
) ); | |
if ( !empty( $results->posts ) ) { | |
return $results->posts; | |
} | |
} |
This file contains hidden or 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 = $.get( global.search_api, { term: term }, function( res ) { | |
if ( res !== null ) { | |
var results = []; | |
for(var key in res) { | |
results.push(res[key].post_title) | |
} | |
suggest(results); | |
} | |
}); | |
} | |
}); | |
}); |
This file contains hidden or 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