Demo (AJAX Search)

This is a demo of a search form configured to use AJAX.

View the source code

functions.php

<?php function demo_ajax_search() { $args = array(); $args['wp_query'] = array( 'post_type' => array('page', 'field', 'param'), 'orderby' => 'title', 'order' => 'ASC' ); $args['form'] = array( 'auto_submit' => true ); $args['form']['ajax'] = array( 'enabled' => true, 'show_default_results' => true, 'results_template' => 'template-ajax-results.php', // This file must exist in your theme root 'button_text' => 'Load More Results'); $args['fields'][] = array( 'type' => 'search', 'placeholder' => 'Enter search terms' ); $args['fields'][] = array( 'type' => 'post_type', 'format' => 'checkbox', 'label' => 'Search by post type', 'values' => array('page' => 'Pages', 'gs_field' => 'Fields', 'gs_param' => 'Parameters') , 'default_all' => true ); $args['fields'][] = array( 'type' => 'orderby', 'format' => 'select', 'label' => 'Order by', 'values' => array('title' => 'Title', 'date' => 'Date Added') ); $args['fields'][] = array( 'type' => 'order', 'format' => 'radio', 'label' => 'Order', 'values' => array('ASC' => 'ASC', 'DESC' => 'DESC'), 'default' => 'ASC' ); $args['fields'][] = array( 'type' => 'posts_per_page', 'format' => 'select', 'label' => 'Results per page', 'values' => array(2=>2, 5=>5, 10=>10), 'default' => 10 ); $args['fields'][] = array( 'type' => 'reset', 'class' => 'button', 'value' => 'Reset' ); register_wpas_form('myform', $args); } add_action('init', 'demo_ajax_search');

Page Template

<?php get_header(); $search = new WP_Advanced_Search('myform'); ?> <div class="row search-section"> <div id="sidebar" class="large-3 columns"> <?php $search->the_form(); ?> </div> <div class="search-results large-9 columns"> <div id="wpas-results"></div> <!-- This is where our results will be loaded --> </div> </div> <?php get_footer(); ?>

Results Template

<?php /* * template-ajax-results.php * This file should be created in the root of your theme directory */ if ( have_posts() ) : while ( have_posts() ) : the_post(); $post_type = get_post_type_object($post->post_type); ?> <article> <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> <p class="info"><strong>Post Type:</strong> <?php echo $post_type->labels->singular_name; ?> &nbsp;&nbsp; <strong>Date added:</strong> <?php the_time('F j, Y'); ?></p> <?php the_excerpt(); ?> </article> <?php endwhile; else : echo '<p>Sorry, no results matched your search.</p>'; endif; wp_reset_query(); ?>