Example styles and scripts to enhance the Sitecore Experience Editor when using SXA search components.

search-query-aware.css

.search-results.no-query:not(.show-empty-query)>*,.search-results-count.no-query:not(.show-empty-query)>*,.page-selector.no-query:not(.show-empty-query)>* {
    height: 0;
    overflow: hidden;
}

.search-query-show,.search-query-hide {
    display: none!important;
}

.search-query-true.search-query-show,.search-query-true .search-query-show {
    display: block!important;
}

.search-query-false.search-query-hide,.search-query-false .search-query-hide {
    display: block!important;
}

.search-location-show,.search-location-hide {
    display: none!important;
}

.search-location-true.search-location-show,.search-location-true .search-location-show {
    display: block!important;
}

.search-location-false.search-location-hide,.search-location-false .search-location-hide {
    display: block!important;
}

.search-other-show,.search-other-hide {
    display: none!important;
}

.search-other-true.search-other-show,.search-other-true .search-other-show {
    display: block!important;
}

.search-other-false.search-other-hide,.search-other-false .search-other-hide {
    display: block!important;
}

body.on-page-editor .row {
    outline: 2px solid rgba(128,166,206,0.4);
}

body.on-page-editor .columns {
    outline: 2px solid rgba(28,58,108,0.25);
}

body.on-page-editor .component {
    outline: 2px solid rgba(247,124,33,0.4);
}

body.on-page-editor .component.row-splitter {
    outline: none;
}

body.on-page-editor .component.video {
    min-width: 320px;
    min-height: 240px;
    width: 100%;
}

body.on-page-editor .zg-height-fix {
    height: auto!important;
}

body.on-page-editor .scEmptyPlaceholder {
    position: relative!important;
}

body.preview .sc-breadcrumb-item-path {
    height: auto!important;
    border: 1px solid transparent;
}

body.preview .sc-breadcrumb-item-rectangle img {
    height: 16px!important;
}

body.on-page-editor .container:before,body.on-page-editor .search-query-aware:before,body.on-page-editor .search-location-aware:before,body.on-page-editor .search-other-aware:before,body.on-page-editor .search-query-show:before,body.on-page-editor .search-query-hide:before,body.on-page-editor .search-location-show:before,body.on-page-editor .search-location-hide:before,body.on-page-editor .search-other-show:before,body.on-page-editor .search-other-hide:before,body.on-page-editor .component-hidden:before {
    pointer-events: none;
    display: block;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    padding: .25rem;
    color: #b02925;
    background: #f77c21;
    text-align: center;
    opacity: .5;
}

body.on-page-editor .container:before {
    content: "Container Drop Content Below";
    font-size: 1.5rem;
}

body.on-page-editor .search-query-aware {
    display: block!important;
}

body.on-page-editor .search-query-aware:before {
    content: "Search Query Aware";
    font-size: 1.5rem;
}

body.on-page-editor .search-location-aware {
    display: block!important;
}

body.on-page-editor .search-location-aware:before {
    content: "Search Location Aware";
    font-size: 1.5rem;
}

body.on-page-editor .search-other-aware {
    display: block!important;
}

body.on-page-editor .search-other-aware:before {
    content: "Search Other Aware";
    font-size: 1.5rem;
}

body.on-page-editor .search-query-show {
    display: block!important;
}

body.on-page-editor .search-query-show:before {
    content: "Show if Query";
    font-size: 1.5rem;
}

body.on-page-editor .search-query-hide {
    display: block!important;
}

body.on-page-editor .search-query-hide:before {
    content: "Hide if Query";
    font-size: 1.5rem;
}

body.on-page-editor .search-location-show {
    display: block!important;
}

body.on-page-editor .search-location-show:before {
    content: "Show if Location";
    font-size: 1.5rem;
}

body.on-page-editor .search-location-hide {
    display: block!important;
}

body.on-page-editor .search-location-hide:before {
    content: "Hide if Location";
    font-size: 1.5rem;
}

body.on-page-editor .search-other-show {
    display: block!important;
}

body.on-page-editor .search-other-show:before {
    content: "Show if Search Other";
    font-size: 1.5rem;
}

body.on-page-editor .search-other-hide {
    display: block!important;
}

body.on-page-editor .search-other-hide:before {
    content: "Hide if Search Other";
    font-size: 1.5rem;
}

body.on-page-editor .component-hidden {
    display: block!important;
}

body.on-page-editor .component-hidden:before {
    content: "Hidden from Display";
    font-size: 1.5rem;
}

search-query-aware.js

XA.component.search.queryAware = (function($, document) {
    'use strict';
    function hashChanged(hash) {
        var hasQuery = false;
        var hasLocation = false;
        var hasOther = false;
        Object.keys(hash).forEach(function(key, index) {
            if (key == 'q' || key.indexOf('_q') == key.length - 2) {
                if (hash[key] && hash[key] != '') {
                    hasQuery = true;
                }
            }
            if (key == 'g' || key.indexOf('_g') == key.length - 2) {
                if (hash[key] && hash[key] != '') {
                    hasLocation = true;
                }
            }
            if (key != 'g' && key != 'q' && key != 'o' && key.indexOf('_g') == -1 && key.indexOf('_q') == -1 && key.indexOf('_o') == -1) {
                if (hash[key] && hash[key] != '') {
                    hasOther = true;
                }
            }
            if (hasLocation && hasQuery && hasOther) {
                return;
            }
        });
        $('.search-query-aware').addClass('search-query-' + hasQuery);
        $('.search-query-aware').removeClass('search-query-' + !hasQuery);
        $('.search-location-aware').addClass('search-location-' + hasLocation);
        $('.search-location-aware').removeClass('search-location-' + !hasLocation);
        $('.search-other-aware').addClass('search-other-' + hasOther);
        $('.search-other-aware').removeClass('search-other-' + !hasOther);
    }
    function init() {
        XA.component.search.vent.on('hashChanged', hashChanged);
        var hashObj = XA.component.search.query.parseHashParameters(window.location.hash);
        hashChanged(hashObj);
    }
    ;var api = {};
    api.init = function() {
        init();
    }
    ;
    return api;
}(jQuery, document));
XA.register("company-search-queryAware", XA.component.search.queryAware);