Template Setup (AJAX)
This section outlines how to display your search form and results using AJAX. AJAX-enabled search forms allow you to display search results dynamically without reloading the page, which can provide a more seamless user experience. Before proceeding, make sure you have already configured your search form according to the instructions. You may also want to take a look at the AJAX Demo.
Start by initializing the search instance:
$my_search = new WP_Advanced_Search('my-form'); |
Where ‘my-form’ is the name you provided for the form when you configured it in your functions.php file.
You can display the search form anywhere in your template by using the method the_form():
$my_search->the_form(); |
To display search results, add the following HTML element to your template:
<div id="wpas-results"></div> |
When your form is submitted, the framework JavaScript will look for this element and populate it with the search results.
Customizing Search Results
You can customize the look and format of the search results by creating a partial template and supplying that template’s name in your form’s configuration arguments. A default template is provided in templates/template-ajax-results.php :
<?php if ( have_posts() ): ?> <?php while ( have_posts() ): the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <p><strong>Author:</strong> <?php the_author();?> <strong>Date:</strong> <?php the_date();?></p> <?php the_excerpt(); ?> <p><a href="<?php the_permalink(); ?>">Read more...</a></p> <?php endwhile; ?><?php else : ?> <p>Sorry, no posts matched your criteria.</p><?php endif; ?><?php wp_reset_query(); ?> |
Note that this is not a complete template (there is no header or footer included). The template should only contain the standard WordPress loop.
Displaying Debug Information
If you are using AJAX and have enabled debug mode for your search, you will need to add the following element to your template in order to view the debug information:
<div id="wpas-debug"></div> |
When your form is submitted, this container will be populated with debugging information for the current query.