Live Search

Download From WordPress.org

Live Search does not require SearchWP but will use it if available

Live Search enhances your search form by applying an AJAX search, allowing you to see search results without needing to redirect to a results page. Designed to work with any theme and any SearchWP configuration, Live Search is the easiest way to quickly improve your search forms!

Live Search does not require SearchWP, so it is available on wordpress.org. If you have SearchWP installed and activated, Live Search will automatically utilize it. If you don’t, native WordPress search results will be provided.

Usage

After uploading and activating Live Search, any form generated using get_search_form() will be automatically enhanced with live search using the default configuration. The default SearchWP search engine will be used (or WordPress native search if SearchWP isn’t available) and the default theme applied. You canĀ customize everything to a great degree, however.

If you are not using get_search_form() you can simply add a data attribute to enable live search, like so:

<?php
// if your form is generated using get_search_form() you do not need to do this
// as SearchWP Live Search does it automatically out of the box
?>
<form action="" method="get">
<p>
<label for="s"><?php _e( 'Search' , 'mytextdomain' ); ?></label>
<input type="text" name="s" id="s" value="" data-swplive="true" /> <!-- data-swplive="true" enables SearchWP Live Search -->
</p>
<p>
<button type="submit"><?php _e( 'Search' , 'mytextdomain' ); ?></button>
</p>
</form>
view raw gistfile1.phtml hosted with ❤ by GitHub

If you would like to prevent SearchWP from automatically enabling live search on forms generated with get_search_form(), use theĀ searchwp_live_search_hijack_get_search_form filter.


Customizing the search engine and config used per search form

You may customize the search engine used by setting the data-swpengine attribute on your input field to match the search engine name you would like to use. This only applies when SearchWP is installed and activated, and takes precendence over the engine defined in the applicable config.

You may customize the config used per search form by setting the data-swpconfig attribute on your input to match an array key from the configs array. To customize these use the searchwp_live_search_configs filter.


Customizing the results

Live Search’s results are powered by a template system. You’ll notice that there is a file that ships with the plugin: ~/wp-content/plugins/searchwp-live-ajax-search/templates/search-results.php. This file is used to display search results. It is recommended that if you wish to customize the search results you take the following steps:

  1. Create a folder inside your theme directory titled searchwp-live-ajax-search
  2. Copy search-results.php from the ~/wp-content/plugins/searchwp-live-ajax-search/templates/ directory into that folder
  3. Customize your theme’s copy of search-results.php as you would any theme template
  4. Optionally create additional files for each search engine e.g. search-results-supplemental.php for a search engine named supplemental

Live Search outputs some basic styles to properly position the results wrapper. It also outputs a default, minimal theme of sorts. You can remove the default visual styling while retaining the positioning by dequeueing the default theme CSS:

<?php
function my_remove_searchwp_live_search_theme_css() {
wp_dequeue_style( 'searchwp-live-search' );
}
add_action( 'wp_enqueue_scripts', 'my_remove_searchwp_live_search_theme_css' );
view raw gistfile1.php hosted with ❤ by GitHub

If you would like to also remove the positioning CSS, you can do that using the searchwp_live_search_base_styles filter.


Filters

The following filters are available for use in Live Search:

searchwp_live_search_hijack_get_search_form
Set whether Live Search will automatically enhance search forms generated by get_search_form(). Default is true, to disable:

<?php
add_filter( 'searchwp_live_search_hijack_get_search_form', '__return_false' );
view raw gistfile1.php hosted with ❤ by GitHub

searchwp_live_search_get_search_form_engine
Define the search engine to be used when automatically enabling live search on forms generated by get_search_form(). Default is 'default'.

Note: only applicable with SearchWP installed and activated

<?php
// only applies when SearchWP is active
function my_searchwp_live_search_get_search_form_engine() {
return 'my_supplemental_engine';
}
add_filter( 'searchwp_live_search_get_search_form_engine', 'my_searchwp_live_search_get_search_form_engine' );
view raw gistfile1.php hosted with ❤ by GitHub

searchwp_live_search_get_search_form_config
Define the config to be used when automatically enabling live search on forms generated by get_search_form(). Default is 'default'.

Note: only applicable with SearchWP installed and activated

<?php
// only applies when SearchWP is active
function my_searchwp_live_search_get_search_form_config)() {
return 'my_config';
}
add_filter( 'searchwp_live_search_get_search_form_config', 'my_searchwp_live_search_get_search_form_config' );
view raw gistfile1.php hosted with ❤ by GitHub

searchwp_live_search_configs
Add your own configurations, which control settings for which search engine to use, search delay, minimum characters, results pane positioning, and spinner options. Configs are stored as an associative array, so you can optionally override the values in the default key, or add your own and use them when setting the data-swpconfig attribute on your search input.

This is the default configuration:

<?php
$configs = array(
'default' => array( // 'default' config
'engine' => 'default', // search engine to use (if SearchWP is available)
'input' => array(
'delay' => 500, // wait 500ms before triggering a search
'min_chars' => 3, // wait for at least 3 characters before triggering a search
),
'results' => array(
'position' => 'bottom', // where to position the results (bottom|top)
'width' => 'auto', // whether the width should automatically match the input (auto|css)
'offset' => array(
'x' => 0, // x offset (in pixels)
'y' => 5 // y offset (in pixels)
),
),
'spinner' => array( // powered by http://fgnass.github.io/spin.js/
'lines' => 10, // number of lines in the spinner
'length' => 8, // length of each line
'width' => 4, // line thickness
'radius' => 8, // radius of inner circle
'corners' => 1, // corner roundness (0..1)
'rotate' => 0, // rotation offset
'direction' => 1, // 1: clockwise, -1: counterclockwise
'color' => '#000', // #rgb or #rrggbb or array of colors
'speed' => 1, // rounds per second
'trail' => 60, // afterglow percentage
'shadow' => false, // whether to render a shadow
'hwaccel' => false, // whether to use hardware acceleration
'className' => 'spinner', // CSS class assigned to spinner
'zIndex' => 2000000000, // z-index of spinner
'top' => '50%', // top position (relative to parent)
'left' => '50%', // left position (relative to parent)
),
));
view raw gistfile1.php hosted with ❤ by GitHub

You can change the values of these defaults, or append your own separated configs and have multiple configs available to you:

<?php
function my_searchwp_live_search_configs( $configs ) {
// override some defaults
$configs['default'] = array(
'engine' => 'default', // search engine to use (if SearchWP is available)
'input' => array(
'delay' => 500, // wait 500ms before triggering a search
'min_chars' => 3, // wait for at least 3 characters before triggering a search
),
'results' => array(
'position' => 'bottom', // where to position the results (bottom|top)
'width' => 'auto', // whether the width should automatically match the input (auto|css)
'offset' => array(
'x' => 0, // x offset (in pixels)
'y' => 5 // y offset (in pixels)
),
),
'spinner' => array( // powered by http://fgnass.github.io/spin.js/
'lines' => 10, // number of lines in the spinner
'length' => 8, // length of each line
'width' => 4, // line thickness
'radius' => 8, // radius of inner circle
'corners' => 1, // corner roundness (0..1)
'rotate' => 0, // rotation offset
'direction' => 1, // 1: clockwise, -1: counterclockwise
'color' => '#000', // #rgb or #rrggbb or array of colors
'speed' => 1, // rounds per second
'trail' => 60, // afterglow percentage
'shadow' => false, // whether to render a shadow
'hwaccel' => false, // whether to use hardware acceleration
'className' => 'spinner', // CSS class assigned to spinner
'zIndex' => 2000000000, // z-index of spinner
'top' => '50%', // top position (relative to parent)
'left' => '50%', // left position (relative to parent)
),
);
// add an additional config called 'my_config'
$configs['my_config'] = array(
'engine' => 'supplemental', // search engine to use (if SearchWP is available)
'input' => array(
'delay' => 300, // wait 500ms before triggering a search
'min_chars' => 2, // wait for at least 3 characters before triggering a search
),
'results' => array(
'position' => 'top', // where to position the results (bottom|top)
'width' => 'css', // whether the width should automatically match the input (auto|css)
'offset' => array(
'x' => 0, // x offset (in pixels)
'y' => 0 // y offset (in pixels)
),
),
'spinner' => array( // powered by http://fgnass.github.io/spin.js/
'lines' => 8, // number of lines in the spinner
'length' => 6, // length of each line
'width' => 5, // line thickness
'radius' => 6, // radius of inner circle
'corners' => 1, // corner roundness (0..1)
'rotate' => 0, // rotation offset
'direction' => 1, // 1: clockwise, -1: counterclockwise
'color' => '#000', // #rgb or #rrggbb or array of colors
'speed' => 1, // rounds per second
'trail' => 60, // afterglow percentage
'shadow' => false, // whether to render a shadow
'hwaccel' => false, // whether to use hardware acceleration
'className' => 'spinner', // CSS class assigned to spinner
'zIndex' => 2000000000, // z-index of spinner
'top' => '50%', // top position (relative to parent)
'left' => '50%', // left position (relative to parent)
),
);
return $configs;
}
add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' );
view raw gistfile1.php hosted with ❤ by GitHub

searchwp_live_search_base_styles
Set whether the default results pane positioning CSS is applied. NOTE: this is separate from the visual appearance of the search results and controls only positioning. Default is true, to disable:

<?php
add_filter( 'searchwp_live_search_base_styles', '__return_false' );
view raw gistfile1.php hosted with ❤ by GitHub

searchwp_live_search_posts_per_page
Control how many results are returned. Default is 7, to change:

<?php
function my_searchwp_live_search_posts_per_page() {
return 20; // return 20 results
}
add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' );
view raw gistfile1.php hosted with ❤ by GitHub
Fix Search on Your Site. No Coding Required!

Now you can utilize all of the content that's gone unrecognized by native WordPress search instantly with SearchWP

Get SearchWP