Relevanssi Live Ajax Search

<form role="search" method="get" class="search-form" action="/">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" name="s">
    </label>
    <input type="submit" class="search-submit" value="Search">
</form>

<form role="search" method="get" class="search-form" action="/">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" name="s"
               data-rlvlive="true" data-rlvparentel="#rlvlive" data-rlvconfig="default">
    </label>
    <input type="submit" class="search-submit" value="Search">
    <div id="rlvlive"></div>
</form>

The Live Ajax Search plugin uses templates to display the search results. Using templates makes it very easy to override the default output from your theme if you want to customize the appearance.

You can find the default templates in the templates directory of the plugin. To override a template, create a folder called relevanssi-live-ajax-search inside your theme directory and copy the desired template file there. Live Ajax Search will then automatically use your version of the template.

There are two templates: search-results.php (default) and search-results-query.php (used for the alternate WP_Query mode, which is more compatible with third-party plugins).

Live Ajax Search adds two sets of styles to your site. The first set is the baseline CSS that determines the position of the search results. To remove these styles, use the following filter hook:

add_filter( 'relevanssi_live_search_base_styles', '__return_false' );

The second set is the main stylesheet, enqueued as relevanssi-live-search. To disable it completely, use:

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'relevanssi-live-search' );
}, 99 );

Since version 2.0, Live Ajax Search uses a CSS-based spinner. To change its colour, add the following CSS to your theme:

.rlv-has-spinner {
    border-color: #19892c;
    border-right-color: transparent;
}
.rlv-has-spinner::after {
    background-color: #19892c;
}

Relevanssi Live Ajax Search provides many useful filter hooks for developers:

• relevanssi_live_search_add_result_div (boolean) – Controls whether an extra results div is added inside the search form.
• relevanssi_live_search_alter_results (array) – Modify the search results before they are displayed.
• relevanssi_live_search_base_styles (boolean) – Disable the base CSS styles.
• relevanssi_live_search_configs (array) – Filter the available configurations for different search forms.
• relevanssi_live_search_get_search_form_config (string) – Choose which configuration set is used (default: “default”).
• relevanssi_live_search_get_template_part (array, string, string) – Filter the templates used to display the results.
• relevanssi_live_search_hijack_get_search_form (boolean) – Disable automatic form hijacking.
• relevanssi_live_search_mode (string) – Switch between query_posts and wp_query mode.
• relevanssi_live_search_status_location (string) – Control where the “X posts found” status note appears.
• relevanssi_live_search_posts_per_page (int) – Modify the default number of results (default: 7).
• relevanssi_live_search_query_args (array) – Modify the query arguments passed to the search.
• relevanssi_live_search_results_template (bool|string) – Filter the location of the template file.
• relevanssi_live_search_template_dir (string) – Change the name of the template directory.
• relevanssi_live_search_before_result, relevanssi_live_search_before_result_link, relevanssi_live_search_before_result_title, relevanssi_live_search_after_result_title, relevanssi_live_search_after_result_link and relevanssi_live_search_after_result (string) – Inject content in various parts of the template without editing the template file.
• relevanssi_live_search_result_arrow (string) – Change the “»” after the post title.