First we register a custom route with the pages we want to search in.
/**
* Search
*/
class Search {
/**
* Construct
*/
public function __construct() {
// REST API endpoint
add_action( 'rest_api_init', array( $this, 'rest_route' ) );
}
/**
* Register rest route
*
* /wp-json/ventures/v1/posts/
*/
public function rest_route( $data ) {
register_rest_route( 'ventures/v1', '/posts', array(
'methods' => 'GET',
'callback' => array( $this, 'get_rest_api_data' ),
) );
}
/**
* Callback function for custom REST API endpoint
*/
public function get_rest_api_data() {
$data = array();
$post_types = array(
'page',
'post',
'location',
);
foreach ( $post_types as $post_type ) {
$query = new WP_Query( array(
'post_type' => $post_type,
'posts_per_page' => 100,
'no_found_rows' => true,
) );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$data[] = array(
'value' => get_permalink(),
'label' => get_the_title(),
);
}
}
}
wp_reset_postdata();
return $data;
}
}
We use some custom data in our JS.
wp_localize_script(
'ventures',
'ventures',
array(
'home_url' => home_url( '/' ),
'search_results_label' => __( 'Show all results', 'ventures' ),
)
);
We can use this endpoint to search in.
/**
* Search
*/
var searchResults = [];
$( '.js-toggle-search' ).on( 'click', function( e ) {
e.preventDefault();
$( '.pt-search__input' ).focus();
// Get results
$.getJSON( ventures.home_url + '/wp-json/ventures/v1/posts/', function( data ) {
$.each( data, function( key, value ) {
searchResults.push( {
'value' : value.value,
'label' : value.label,
} );
} )
} );
} );
// Autocomplete
$( '.pt-search__input' ).autocomplete( {
source: searchResults,
minLength: 1,
appendTo: '.pt-search__results',
select: function( event, ui ) {
window.location.href = ui.item.value;
return false;
},
focus: function( event, ui ) {
return false;
},
open: function( event, ui ) {
var value = $( '.pt-search__input' ).val();
$( '.ui-autocomplete' ).append( '<li><p><a href="' + ventures.home_url + '?s=' + value + '">' + ventures.search_results_label + '</a></p></li>' );
},
} ).data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
var expression = new RegExp( '(' + this.term + ')', 'gi' );
var label = item.label.replace(
expression,
"<span class='pt-highlight'>$1</span>"
);
return $( '<li></li>' ).append( '<a>' + label + '</a>' ).appendTo( ul );
};