Display Custom Sources (e.g. Users) in Live Search Results

By default Live Search will utilize your Default Engine which is limited to Sources that are based on WP_Post objects (e.g. Posts, Pages, Custom Post Types, etc.)

We can use the searchwp_live_search_get_search_form_engine hook to use a Supplemental Engine for Live Search results, but in the same way that we need to use a custom results template for a Supplemental Engine we need to use a custom results template for Live Ajax Search if we want to display results from a custom Source.

SearchWP Live Ajax Search has a template structure we can utilize to output our custom Source results.

In this example we’ll put together a Live Ajax Search results template that takes into consideration Users from our supplemental Engine:

On this example site we have a User that has a username of ‘coffeefan’ with a display name of ‘Jane Doe’:

When we search for coffee using Live Ajax Search, our custom results template will include that result and another Post about coffee:

To implement this custom Live Search results template we can create a folder searchwp-live-ajax-search in our theme directory, and inside that folder create a file search-results.php with this code:

	<?php
	// Execute a search using our supplemental SearchWP Engine.
	// @link https://searchwp.com/documentation/knowledge-base/custom-source-results-live-search/
	$search_query = isset( $_REQUEST['s'] ) ? sanitize_text_field( $_REQUEST['s'] ) : null;

	$search_results = [];
	if ( ! empty( $search_query ) && class_exists( '\\SearchWP\\Query' ) ) {
	$searchwp_query = new \SearchWP\Query( $search_query, [
	'engine' => 'supplemental', // The Engine name.
	'fields' => 'all', // Load proper native objects of each result.
	] );

	$search_results = $searchwp_query->get_results();
	}
	?>

	<?php if ( ! empty( $search_query ) && ! empty( $search_results ) ) : ?>
	<?php foreach ( $search_results as $search_result ) : ?>
	<?php
	switch( get_class( $search_result ) ) {
	case 'WP_Post':
	?>
	<div class="searchwp-live-search-result" role="option" id="" aria-selected="false">
	<p><a href="<?php echo esc_url( get_permalink( $search_result->ID ) ); ?>">
	<?php echo get_the_title( $search_result->ID ); ?> »
	</a></p>
	</div>
	<?php
	break;

	case 'WP_User':
	?>
	<div class="searchwp-live-search-result" role="option" id="" aria-selected="false">
	<p><a href="<?php echo get_author_posts_url( $search_result->data->ID ); ?>">
	<?php echo esc_html( $search_result->data->display_name ); ?> »
	</a></p>
	</div>
	<?php
	break;
	}
	?>
	<?php endforeach; ?>
	<?php else : ?>
	<p class="searchwp-live-search-no-results" role="option">
	<em><?php esc_html_e( 'No results found.', 'swplas' ); ?></em>
	</p>
	<?php endif; ?>

view raw search-results.php hosted with ❤ by GitHub

This results template can be customized in any way you’d like, outputting various attributes of each result type as determined by the switch statement.