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.
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 precedence 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_configsfilter.
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:
Create a folder inside your theme directory titled searchwp-live-ajax-search
Copy search-results.php from the ~/wp-content/plugins/searchwp-live-ajax-search/templates/directory into that folder
Customize your theme’s copy of search-results.php as you would any theme template
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 dequeuing the default theme CSS: