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; ?> |
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.
