reportsFilter.php

<?php
/*
Template Name: Reports Filter
 */
get_header(); ?>

    <div id="breadcrumbs">

        <?php
            if(function_exists('bcn_display')) {
                bcn_display();
            }
        ?>

    </div>

    <section id="content-full">

        <h2>Research Reports</h2>

        <p>Filter the reports below:</p>

        <?php
            // check if the form var is set and not equal to "all"
            function searchParamSet($param) {
                if(isset($param) && !empty($param) && $param != "all") {
                    return true;
                } else {
                    return false;
                }
            }

            $condition = $_POST['field_52d684eaf18a3'];
            $research  = $_POST['field_52d684ecf18a4'];
            $furtherArgs = array();

            // If the form has been submitted then query the reports
            // using the search parameters
            if(searchParamSet($condition) || searchParamSet($research)) {
                if(searchParamSet($condition) && searchParamSet($research)) {
                    $furtherArgs = array(
                        'relation' => 'AND'
                    );
                }
                if(searchParamSet($condition)) {
                    $furtherArgs[] = array(
                        'key' => 'condition',
                        'value' => $condition,
                        'compare' => 'LIKE'
                    );
                }
                if(searchParamSet($research)) {
                    $furtherArgs[] = array(
                        'key' => 'type_of_research',
                        'value' => $research,
                        'compare' => 'LIKE'
                    );
                }
            }


            /*
                $args = array(
                    'numberposts' => -1,
                    'post_type' => 'research_report',
                    'meta_query' => array(
                        'relation' => 'AND',
                        array(
                            'key' => 'location',
                            'value' => 'Melbourne',
                            'compare' => '='
                        ),
                        array(
                            'key' => 'attendees',
                            'value' => 100,
                            'type' => 'NUMERIC',
                            'compare' => '>'
                        )
                    )
                );
            */

            $args = array(
                'numberposts' => -1,
                'post_type'  => 'research_report',
                'orderby'    => 'title',
                'order'      => 'ASC',
                'meta_query' => $furtherArgs
            );
            /*
                echo '<pre>';
                var_dump($args);
                echo '</pre>';
            */
            // get results
            $the_query = new WP_Query( $args );
        ?>
        <? // Javascript to search+highlight any search terms ?>
        <script type="text/javascript">
            /* Make a new :Contains method that is case-insensitive */
            jQuery.expr[':'].Contains = function(a, i, m) {
                return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
            };
            /*
                highlight v4

                Highlights arbitrary terms.

                <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>

                MIT license.

                Johann Burkard
                <http://johannburkard.de>
                <mailto:jb@eaio.com>
            */

            jQuery.fn.highlight=function(c){function e(b,c){var d=0;if(3==b.nodeType){var a=b.data.toUpperCase().indexOf(c);if(0<=a){d=document.createElement("span");d.className="highlight";a=b.splitText(a);a.splitText(c.length);var f=a.cloneNode(!0);d.appendChild(f);a.parentNode.replaceChild(d,a);d=1}}else if(1==b.nodeType&&b.childNodes&&!/(script|style)/i.test(b.tagName))for(a=0;a<b.childNodes.length;++a)a+=e(b.childNodes[a],c);return d}return this.length&&c&&c.length?this.each(function(){e(this,c.toUpperCase())}): this};jQuery.fn.removeHighlight=function(){return this.find("span.highlight").each(function(){this.parentNode.firstChild.nodeName;with(this.parentNode)replaceChild(this.firstChild,this),normalize()}).end()};

            $(document).ready(function() {
                var reportsList  = $('.reports-list');
                var reportsItems = $('.reports-list li');

                var textSearch = function(searchTerm) {
                    if (searchTerm == "") {
                        reportsItems.removeHighlight();
                        reportsItems.removeClass("visible");
                        reportsItems.addClass("visible");
                    } else {
                        var foundin = $('li:Contains("'+ searchTerm +'")').closest("li");

                        // Hide all of the search results
                        reportsList.addClass("text-search");
                        // Show all of the search results that contain said text
                        reportsItems.removeClass("visible");
                        foundin.addClass("visible");
                        // Highlight all occurences of the search term
                        reportsItems.removeHighlight();
                        reportsItems.highlight(searchTerm);
                    }
                }

                // run the search on page load
                textSearch("<?= $_POST['searchTerm'] ?>");

                // run the search when the user changes the text input
                window.addEventListener('input', function(e){
                    textSearch($('#searchTerm').val());
                }, false);
            });
        </script>
        <? // Hide the search field for those without JavaScript ?>
        <noscript>
            <style type="text/css">
                .text-search { display: none; }
            </style>
        </noscript>

        <form method="post" class="search-filter">
            <div class="form-line text-search">
                <label class="label">Search:</label>
                <div class="controls">
                    <input type="text" name="searchTerm" id="searchTerm" placeholder="Leave this blank to show all" class="textinput textinput-r" value="<?= ((!empty($_POST['searchTerm'])) ? $_POST['searchTerm'] : "") ?>" />
                </div>
            </div>
            <div class="form-line">
                <label class="label">Condition:</label>
                <div class="controls">
                    <?php
                        // Show the condition options in a dropdown box
                        $field_key = "field_52d684eaf18a3";
                        $field = get_field_object($field_key);
                        if($field) {
                            echo '<select name="', $field['key'] ,'" class="textinput textinput-r">';
                                // Create a default "ALL" option
                                echo '<option value="all">ALL</option>';
                                // Show all of the other options
                                foreach($field['choices'] as $k => $v) {
                                    echo '<option value="', $k ,'"', (($condition == $k) ? "selected=\"selected\"" : "") ,'>', $v ,'</option>';
                                }
                            echo '</select>';
                        }
                    ?>
                </div>
            </div>
            <div class="form-line">
                <label class="label">Research Type:</label>
                <div class="controls">
                    <?php
                        // Show the research options in a dropdown box
                        $field2_key = "field_52d684ecf18a4";
                        $field2 = get_field_object($field2_key);
                        if($field2) {
                            echo '<select name="', $field2['key'] ,'" class="textinput textinput-r">';
                                // Create a default "ALL" option
                                echo '<option value="all">ALL</option>';
                                // Show all of the other options
                                foreach($field2['choices'] as $k => $v) {
                                    echo '<option value="', $k ,'"', (($research == $k) ? "selected=\"selected\"" : "") ,'>', $v ,'</option>';
                                }
                            echo '</select>';
                        }
                    ?>
                </div>
            </div>
            <div class="form-line">
                <div class="controls">
                    <input type="submit" name="submit_search" value="Search" class="btn btn-b" />
                </div>
            </div>
        </form>

        <ul class="reports-list">
            <?php if( $the_query->have_posts() ): ?>
                <?php while($the_query->have_posts()) : $the_query->the_post(); ?>
                    <li>
                        <h2 class="report-title"><?php the_title(); ?></h2>
                        <div class="report-content"><?php the_content(); ?></div>
                    </li>
                <?php endwhile; ?>
            <?php else: ?>
                <li>No reports matched your query.</li>
            <?php endif; ?>
        </ul>

    </section><!-- End Content-->

        <div style="clear: both"></div>

    </div>

</section><!-- page_body -->

<?php get_footer(); ?>