prashantcs053
7/3/2017 - 10:52 AM

using defiant js - to search in json object

using defiant js - to search in json object

.page-template-template-retailer-listing .retailer_search_section .formSec {
    margin-top: 23px;position: relative;
}
.page-template-template-retailer-listing .retailer_search_section .formSec .blockArea,
.page-template-template-retailer-listing .rytSubPart .blockArea{
   
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: RGBA(255,255,255,0.2);
    z-index: 2;
}
.page-template-template-retailer-listing .rytSubPart .blockArea{height: 116px;}
 $(window).load(function () {
        search_retailer();
        $(".retailer_search_section").find(".blockArea").addClass("display_none");
        $(".view_all_zindex").css("z-index", '3');
        $(".rytSubPartIn").find(".blockArea").addClass("display_none");
        $("body").on("change", ".search_field", function () {
            fieldsChange();
        });
        $("body").on("submit", "form.retailer_search_form", function () {
            fieldsChange();
        });
        $("body").on("change", "input.checkbox_change", function () {
            var $this = $(this);
            if (flag == '0') {
                flag = '1';
                $("input.checkbox_change").each(function () {
                    var $check = $(this);
                    if (!$check.is($this)) {
                        $check.prop('checked', false);
                        $check.attr('checked', false);
                    }
                });
                fieldsChange();
            }
        });
        $("body").on("change", "input.like_star", function () {
            var $this = $(this);
            var selectedNights = [];

            $("input.like_star").each(function () {
                var $dataPage = $(this).attr("data-page");
                if (typeof $dataPage !== 'undefined' && $dataPage == 'single') {
                    if ($this.is(':checked')) {
                        selectedNights.push($(this).val());
                        $(this).prop('checked', true);
                        $(this).attr('checked', true);

                    } else {
                        $(this).prop('checked', false);
                        $(this).attr('checked', false);
                    }
                } else if ($(this).is(':checked')) {
                    selectedNights.push($(this).val());
                }
            });
            $.ajax({
                type: 'POST',
                url: siteVar.ajaxURL,
                data: {
                    action: 'set_nights_session',
                    selectedIds: selectedNights
                },
                success: function (response) {
                    var response_array = JSON.stringify(response);
                    if ($("body").hasClass("page-template-template-plan-night")) {
                        if ($(".gfield.retailer_selected_field").length > 0) {
                            $(".gfield.retailer_selected_field").find("input[type='text']").val(response_array);
                        }
                    }
                }
            });
        });
        $("body").on("change", "input#view_all_retailer", function () {
            var $this = $(this);
            if ($this.is(':checked')) {
                $('.companySec').fadeOut(400);
                setTimeout(function () {
                    $('.companySecList').fadeIn(400);
                }, 400);
            } else {
                $('.companySecList').fadeOut(400);
                setTimeout(function () {
                    $('.companySec').fadeIn(400);
                }, 400);
            }
        });

        
        getUrlVars_put_inputs();
    });

 function search_retailer() {
        //console.clear();
        if (typeof retailer_obj != 'undefined' && Object.keys(retailer_obj).length > 0) {
            retailerSnapshot = Defiant.getSnapshot(retailer_obj);
        }
    }

    function fieldsChange() {
        var $fieldVal = [];
        if (typeof retailerSnapshot != 'undefined') {
            var queryStr = "//retailer_post_arr//*";
            var urlquery_string = '';

            if ($("input#view_all_retailer").is(':checked')) {
                $("input#view_all_retailer").trigger("click");
            }

            // input search field value
            var $inputSearchVal = $("input.search_title").val();
            if ($inputSearchVal != '' && $inputSearchVal != ' ') {
                queryStr += '[contains(designer_name,"' + $inputSearchVal + '")]';
                urlquery_string += "&searchterm=" + $inputSearchVal;
            }

            // select field values
            $(".search_field").each(function () {
                var $thisSingle = $(this);
                var $thisJCFTxt = $(this).parents(".customFormCol").find(".jcf-select");
                var $thisSingleVal = $(this).children("option:selected").val();
                var $thistitleVal = $(this).val();
                var $thisElem = '';
                if ($thisSingle.attr("name") == "search_events") {
                    $thisElem = 'event';
                } else if ($thisSingle.attr("name") == "search_locations") {
                    $thisElem = 'city';
                } else if ($thisSingle.attr("name") == "search_categories") {
                    $thisElem = 'category';
                }
                $thisJCFTxt.removeClass("jcf_active_state");
                if ($thisSingleVal != '' && $thisSingleVal != '-1') {
                    $thisJCFTxt.addClass("jcf_active_state");
                    $fieldVal[$thisElem] = $thisSingleVal;

                    queryStr += '[contains(' + $thisElem + ',"' + $thisSingleVal + '")]';
                    urlquery_string += "&" + $thisElem + "=" + $thisSingleVal;
                } else {
                    $fieldVal[$thisElem] = '';
                }
            });

            // checkbox field values
            $("input.checkbox_change").each(function () {
                var $check = $(this);
                var $checkType = $(this).attr("data-type");
                if ($check.is(':checked')) {
                    queryStr += '[contains(' + $checkType + ',"Yes")]';
                }
            });
            urlquery_string = urlquery_string.replace(" ", "+");
            urlquery_string = urlquery_string.slice(1);
            console.log(queryStr);
            console.log(urlquery_string);
            window.history.pushState({"html": "Retailers Search", "pageTitle": "Retailers Search"}, "", siteVar.pageUrl + "?" + urlquery_string + "");

            var newResult = JSON.search(retailerSnapshot, queryStr);
            console.log(newResult);
            var companySec = $('.companySec');
            $(".retailer_search_section").find(".blockArea").css("display", "block");
            if (companySec.is(":visible") == true) {
                companySec.fadeOut(400);
            }
            if ($('.contentWrap570').find('.no_retailers').is(":visible") == true) {
                $('.contentWrap570').find('.no_retailers').fadeOut(400);
            }
            setTimeout(function () {
                $('.contentWrap570').find('.loading-section').fadeIn(400);
                companySec.find(".companyRows").css('display', 'none');
                companySec.find(".alpha_node").css('display', 'none');
            }, 400);
            if (typeof newResult != 'undefined' && Object.keys(newResult).length > 0) {
                setTimeout(function () {
                    for (var i = 0; i < Object.keys(newResult).length; i++) {
                        companySec.find('.companyRows.retailer_id_' + newResult[i].post_id).css("display", "table");
                        companySec.find('.alpha_node.head_' + newResult[i].head).css("display", "block");
                    }
                }, 1200);
                setTimeout(function () {
                    $('.contentWrap570').find('.loading-section').fadeOut(400);
                }, 1600);
                setTimeout(function () {
                    companySec.fadeIn(400);
                    $(".retailer_search_section").find(".blockArea").css("display", "none");
                }, 2000);
            } else {

                setTimeout(function () {
                    $('.contentWrap570').find('.loading-section').fadeOut(400);
                }, 1200);
                setTimeout(function () {
                    $('.contentWrap570').find('.no_retailers').fadeIn(400);
                    $(".retailer_search_section").find(".blockArea").css("display", "none");
                }, 1600);
            }

            setTimeout(function () {
                jQuery('.parrlax_sec').parallax("50%", 0.5);
            }, 2000);

        }
        flag = '0';
    }
    function getUrlVars_put_inputs()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        if (hashes.length > 0) {
            for (var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
        }
        if (vars.length > 0 && (vars.city || vars.category || vars.event || vars.searchterm)) {
            jQuery(".retailer_search_form").trigger('submit');
        }
    }
if (!function_exists('register_script')) {
    function register_script() {
        global $retailer_all_post_arr;
        wp_register_script('jquery', get_template_directory_uri() . '/assets/js/jquery-1-11-1.min.js');
        wp_register_script('jcf-js', get_template_directory_uri() . '/assets/js/jcf.js');
        wp_register_script('jcf-select-js', get_template_directory_uri() . '/assets/js/jcf.select.js');
        wp_register_script('countdown-js', get_template_directory_uri() . '/assets/js/jquery.countdown.min.js');
        wp_register_script('defiant', get_template_directory_uri() . '/assets/js/defiant.min.js');
        wp_register_script('main', get_template_directory_uri() . '/assets/js/main.js?v=17');
        wp_localize_script('main', 'retailer_obj', array(
            'retailer_post_arr' => $retailer_all_post_arr,
        ));
        wp_enqueue_script('jquery');
        wp_enqueue_script('jcf-js');
        wp_enqueue_script('jcf-select-js');
        wp_enqueue_script('defiant');
        wp_enqueue_script('custom');
    }
    add_action('wp_footer', 'register_script');
}
<div class="formSec">      
                                <div class=""></div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="customFormCol searchDiv">
                                            <form class="retailer_search_form" method="post" action="javascript:void(0)">
                                                <input type="text" name="search_title" class="search_title padding_left" placeholder="Search by Name" value="<?php echo (isset($_GET[searchterm])) ? $_GET[searchterm] : ''; ?>" />
                                                <input type="submit" value="submit" />
                                            </form>
                                        </div>
                                        <div class="customFormCol search_location">
                                            <select name="search_locations" class="search_field">
                                                <option value="-1">Select Location</option>
                                                <option<?php echo get_selected_status($_GET['city'], 'Melbourne') ?>>Melbourne</option>
                                                <option<?php echo get_selected_status($_GET['city'], 'Sydney') ?>>Sydney</option> 
                                            </select>                                          
                                        </div>
                                        <div class="customFormCol search_categories">
                                            <select name="search_categories" class="search_field">
                                                <option value="-1">Categories</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Accessories') ?>>Accessories</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Beauty') ?>>Beauty</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Fashion') ?>>Fashion</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Food') ?>>Food</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Lifestyle') ?>>Lifestyle</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Lingerie') ?>>Lingerie</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Mens') ?>>Mens</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Shoes') ?>>Shoes</option>
                                                <option<?php echo get_selected_status($_GET['category'], 'Womens') ?>>Womens</option>
                                            </select>                                           
                                        </div> 
                                        <div class="customFormCol search_events">
                                            <select name="search_events" class="search_field">
                                                <option value="-1">Events</option>
                                                <option<?php echo get_selected_status($_GET['event'], 'Gift Purchase') ?>>Gift Purchase</option>
                                                <option<?php echo get_selected_status($_GET['event'], 'FNO Exclusive') ?>>FNO Exclusive</option>
                                                <option<?php echo get_selected_status($_GET['event'], 'Competition') ?>>Competition</option>
                                                <option<?php echo get_selected_status($_GET['event'], 'In-Store Refreshments') ?>>In-Store Refreshments</option>
                                                <option<?php echo get_selected_status($_GET['event'], 'Live Demonstrations') ?>>Live Demonstrations</option>
                                                <option<?php echo get_selected_status($_GET['event'], 'Fashion Show') ?>>Fashion Show</option>
                                                <option<?php echo get_selected_status($_GET['event'], 'Special Performance') ?>>Special Performance</option>
                                            </select>
                                        </div> 
                                    </div> 
                                    <div class="col-md-12">
                                        <div class="form-group list_filter_by">
                                            <div class="filter_by_div"><label class="lbl">Filter By:</label></div>
                                            <div class="checkbox_filters">
                                                <span class="checkbox-inline">
                                                    <input id="checkbox_amex" class="checkbox_change" data-type="amex" type="checkbox" />
                                                    <label for="checkbox_amex">American Express Accepted</label>
                                                </span>
                                                <span class="checkbox-inline">
                                                    <input id="checkbox_amex_admin" class="checkbox_change" data-type="amex_admin" type="checkbox" />
                                                    <label for="checkbox_amex_admin">AMEX Offers</label>
                                                </span>
                                                <span class="checkbox-inline view_all_zindex" style="z-index: 1;">
                                                    <input id="view_all_retailer" class="viewall" type="checkbox" />
                                                    <label for="view_all_retailer">View all</label>
                                                </span>
                                            </div>                                        
                                        </div>                                                
                                    </div>
                                </div>
                            </div>
                                <?php

                        function compareByName($a, $b) {
                            return strcmp($a["designer_name"], $b["designer_name"]);
                        }

                        $args = array(
                            'post_type' => 'retailers',
                            'nopaging' => true,
                            'post_status' => 'accepted',
                            'fields' => 'ids',
                            'orderby' => 'title',
                            'order' => 'asc'
                        );
                        $query = new WP_Query($args);
                        foreach ($query->posts as $value) {
                            $retailer_post_id = $value;
                            $retailer_meta = get_post_meta($retailer_post_id);
                            $logo_retailer_id = $retailer_meta['logo_retailer'][0];
                            $logo_retailer_src = wp_get_attachment_image_src($logo_retailer_id, 'full');
                            $amex_offer_retailer = $retailer_meta['currently_accepting_american_express_retailer'][0];
                            $amex_admin_offer = $retailer_meta['amex_offer'][0];
                            $designer_name_retailer = ucwords(trim(get_the_title($retailer_post_id)));
                            $num_store_loc = $retailer_meta['store_location_retailer'][0];
                            $categories = wp_get_post_terms($retailer_post_id, 'store');
                            $store_cats = '';
                            if (is_array($categories) && count($categories) > 0) {
                                foreach ($categories as $val) {
                                    $store_cats .= ' ' . $val->name;
                                }
                            }
                            $store_events = '';
                            $store_states = '';
                            if ($num_store_loc > 0) {
                                for ($i = 0; $i < $num_store_loc; $i++) {
                                    $Store_loc_state = $retailer_meta['store_location_retailer_' . $i . '_Store_loc_state'][0];
                                    if ((strpos(strtolower($Store_loc_state), 'victoria') !== false) || (strpos(strtolower($Store_loc_state), 'vic') !== false)) {
                                        $store_states .= ' Melbourne';
                                    } elseif ((strpos(strtolower($Store_loc_state), 'new south wales') !== false) || (strpos(strtolower($Store_loc_state), 'nsw') !== false)) {
                                        $store_states .= ' Sydney';
                                    }
                                    $store_events_size = $retailer_meta['store_location_retailer_' . $i . '_store_events'][0];
                                    if ($store_events_size > 0) {
                                        for ($yy = 0; $yy < $store_events_size; $yy++) {
                                            $store_events .= ' ' . $retailer_meta['store_location_retailer_' . $i . '_store_events_' . $yy . '_stevents'][0];
                                        }
                                    }
                                }
                            }
                            $retailer_all_post_arr[$retailer_post_id]['post_id'] = $retailer_post_id;
                            $retailer_all_post_arr[$retailer_post_id]['head'] = substr($designer_name_retailer, 0, 1);
                            $retailer_all_post_arr[$retailer_post_id]['logo'] = $logo_retailer_src[0];
                            $retailer_all_post_arr[$retailer_post_id]['amex'] = $amex_offer_retailer;
                            $retailer_all_post_arr[$retailer_post_id]['amex_admin'] = $amex_admin_offer;
                            $retailer_all_post_arr[$retailer_post_id]['designer_name'] = $designer_name_retailer;
                            $retailer_all_post_arr[$retailer_post_id]['permalink'] = get_permalink($retailer_post_id);
                            $retailer_all_post_arr[$retailer_post_id]['city'] = $store_states;
                            $retailer_all_post_arr[$retailer_post_id]['event'] = $store_events;
                            $retailer_all_post_arr[$retailer_post_id]['category'] = $store_cats;
                        }
//                        if ($_SERVER['REMOTE_ADDR'] == '182.68.101.179') {
//                           pr($retailer_all_post_arr);
//                        }
                        $default_style = '';
                        $loading_style = '';
                        if ((isset($_GET['searchterm']) && $_GET['searchterm'] != '') || (isset($_GET['city']) && $_GET['city'] != '') || (isset($_GET['category']) && $_GET['category'] != '') || (isset($_GET['event']) && $_GET['event'] != '')) {
                            $default_style = ' style="display:none"';
                            $loading_style = ' style="display:block"';
                        }
                        
                          <div class="companySec"<?php echo $default_style; ?>>
                                        <?php
                                        $chars_arr = array();
                                        foreach ($retailer_all_post_arr as $key => $post_array) {
                                            $designer_name_retailer = get_the_title($key);
                                            $alpha = strtolower(substr($designer_name_retailer, 0, 1));
                                            $retailerClass = ' retailer_id_' . $key;
                                            if (!isset($chars_arr[$alpha])) {
                                                echo "<div class='alpha_node first_el " . ucwords($alpha) . "_area head_" . ucwords($alpha) . " '>" . ucwords($alpha) . "</div>";
                                                $chars_arr[$alpha] = $key;
                                                $retailerClass .= ' hide_line';
                                            }
                                            $selected_val = '';
                                            if (isset($_SESSION['selected_ids']) && in_array($key, $_SESSION['selected_ids'])) {
                                                $selected_val = ' checked="checked"';
                                            }
                                            ?>
                                            <div class="companyRows<?php echo $retailerClass; ?>" data-id="<?php echo $key; ?>">
                                                <div class="companyLogo leftArea">
                                                    <a href="<?php echo $post_array['permalink']; ?>">
                                                        <img src="<?php echo bfiThumb_src($post_array['logo'], 116, 116); ?>" alt="" title=""/>
                                                    </a>
                                                </div>
                                                <div class="companyLogo rytArea clearfix">
                                                    <div class="rytAreaIn tableDiv">
                                                        <div class="title tableCell">
                                                            <a href="<?php echo $post_array['permalink']; ?>">
                                                                <?php echo $post_array['designer_name']; ?>
                                                            </a>
                                                        </div>
                                                        <div class="rytSubPart tableCell clearfix">
                                                            <div class="rytSubPartIn  ">
                                                                <div class="store_loc_star ">                    
                                                                    <input class="like_star" name="favoriteNight[<?php echo $key ?>]" type="checkbox" value="<?php echo $key ?>" id="favoriteNight[<?php echo $key ?>]" <?php echo $selected_val; ?>>
                                                                    <label for="favoriteNight[<?php echo $key ?>]" class="like_star_label"> Add to My Night</label>
                                                                </div>
                                                                <?php if ($post_array['amex'] === 'Yes') { ?>
                                                                    <div class="cardImg">
                                                                        <img src="<?php bloginfo('template_directory') ?>/assets/img/cardImg1.jpg" alt="" title=""/>
                                                                    </div>
                                                                <?php } ?>
                                                                <div class="blockArea "></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php
                                        }
                                        ?>
                                    </div>