https://www.thehewittfertilitycentre.org.uk/_frontend/js/main/functions/site-search.js

1var initSiteSearch = function () {
2    // element variables
3
4    var $siteSearchWrapper = $('#site_search__wrapper'),
5        $siteSearchToggleButtons = $('.launch_site_search'),
6        $body = $('body'),
7        $siteSearchForm = $siteSearchWrapper.find('form'),
8        $siteSearchSearchTermInput = $siteSearchWrapper.find('#site_search_search_term'),
9        $siteSearchSectionFilterInput = $siteSearchWrapper.find('#site_search_section_filter'),
10        $siteSearchUpdatedFilterInput = $siteSearchWrapper.find('#site_search_updated_filter'),
11        $siteSearchPageNumberInput = $siteSearchWrapper.find('#site_search_page_number'),
12        $siteSearchResultsWrapper = $siteSearchWrapper.find('#site_search_results'),
13        $currentResultsCount = $siteSearchWrapper.find('#current_search_results_count'),
14        $totalResultsCount = $siteSearchWrapper.find('#total_search_results_count'),
15        $loadMoreResultsButton = $siteSearchWrapper.find('#load_more_search_results'),
16        $initiallyHiddenElements = $siteSearchWrapper.find('.initially_hidden');
17
18    // constant variables
19
20    var activeClass = "active",
21        visibleClass = "visible",
22        currentSearchTerm = "",
23        currentSectionFilterValue = "",
24        currentUpdatedFilterValue = "",
25        resultsPerPage = 9,
26        totalResults = 0,
27        currentResultsShowing = 0,
28        currentResultsPage = 1;
29
30    // functions
31
32    // display functions
33
34    var showSiteSearch = function () {
35        $siteSearchWrapper.addClass(activeClass);
36        $siteSearchToggleButtons.addClass(activeClass);
37        $body.css('overflow', 'hidden');
38
39        setTimeout(function(){
40            $siteSearchSearchTermInput.focus();
41            $siteSearchSearchTermInput.trigger('click');
42         }, 100);
43
44    };
45
46    var hideSiteSearch = function () {
47        $siteSearchWrapper.removeClass(activeClass);
48        $siteSearchToggleButtons.removeClass(activeClass);
49        $body.css('overflow', 'auto');
50        $siteSearchSearchTermInput.blur();
51    };
52
53    var toggleElementVisibility = function () {
54        var elementsToShowSelector = ".show_on_search"
55
56        // show elements thats only appear when there are results
57        if (totalResults > 0) {
58            elementsToShowSelector += ", .show_with_results";
59        }
60
61        // show elements thats only appear when there are paged results
62        if (totalResults > resultsPerPage && totalResults != currentResultsShowing) {
63            elementsToShowSelector += ", .show_with_paged_results";
64        }
65
66        var $elementsToShow = $initiallyHiddenElements.filter(elementsToShowSelector);
67        var $elementsToHide = $initiallyHiddenElements.not($elementsToShow);
68
69        $elementsToShow.addClass(visibleClass);
70        $elementsToHide.removeClass(visibleClass);
71    };
72
73    // search functions
74
75    var resetCounters = function () {
76        currentResultsPage = 1;
77        $siteSearchPageNumberInput.val(currentResultsPage);
78        totalResults = 0;
79        currentResultsShowing = 0;
80        $currentResultsCount.text(currentResultsShowing);
81        $totalResultsCount.text(totalResults);
82    }
83
84    var populateCounters = function ($parsedResultsHtml) {
85        totalResults = $parsedResultsHtml.find('#total_results_count').text();
86        currentResultsShowing = currentResultsShowing + parseInt($parsedResultsHtml.find('#current_results_count').text());
87
88        $currentResultsCount.text(currentResultsShowing);
89        $totalResultsCount.text(totalResults);
90    }
91
92    var populateSearchResults = function ($parsedResultsHtml) {
93        $siteSearchResultsWrapper.html($parsedResultsHtml.find('.site_search_result__wrapper'));
94
95        initCustomEqualizerzs();
96
97        $siteSearchResultsWrapper.find('.site_search_result__wrapper').each(function (index) {
98            var $result = $(this);
99
100            setTimeout(function () { $result.addClass(visibleClass); }, (100 * index));
101        });
102    };
103
104    var appendSearchResults = function ($parsedResultsHtml) {
105        $siteSearchResultsWrapper.append($parsedResultsHtml.find('.site_search_result__wrapper'));
106
107        initCustomEqualizerzs();
108
109        $siteSearchResultsWrapper.find('.site_search_result__wrapper:not(.' + visibleClass + ')').each(function (index) {
110            var $result = $(this);
111
112            setTimeout(function () { $result.addClass(visibleClass); }, (100 * index));
113        });
114    };
115
116    var populateNoResultsFound = function () {
117        $siteSearchResultsWrapper.html('<h3 class="initially_hidden site_search__no_results_text">Sorry, no results were found matching your search term</h3>');
118        setTimeout(function () { $siteSearchResultsWrapper.find('h3').addClass(visibleClass); }, (150));
119    };
120
121    var getSearchResultsAjax = function (successFunction) {
122        var postData = $siteSearchForm.serializeArray();
123        var formURL = $siteSearchForm.attr("action");
124        var $returnresultsHtml = null;
125
126        $.ajax({

127            url: formURL,
128            type: "POST",
129            data: postData,
130            success: function (resultsHtml) {
131                $returnresultsHtml = parseHtmlToJqueryObject(resultsHtml);
132                successFunction($returnresultsHtml);
133            },
134            error: function () {
135            }
136        });
137    }
138
139    // helper functions
140
141    var blurFormInputs = function () {
142        if ($(window).width() <= largeBreakpoint) {
143            var $field = $('<input type="text"/>')
144            $('body').prepend($field);
145            // stops ios zooming
146            $field.attr('style', 'font-size:1.875rem;');
147
148            setTimeout(function () {
149                $field.focus();
150                setTimeout(function () {
151                    $field.attr('style', 'display:none;');
152                    document.activeElement.blur();
153                    $("input").blur();
154                }, 50);
155            }, 50);
156        }
157    }
158
159    var parseHtmlToJqueryObject = function (rawHtmlString) {
160        return $('<div/>').html(rawHtmlString);;
161    }
162
163    var searchHasChanged = function () {
164        var searchTermHasChanged = currentSearchTerm != $siteSearchSearchTermInput.val();
165        var sectionFilterHasChanged = currentSectionFilterValue != $siteSearchSectionFilterInput.val();
166        var updatedFilterHasChanged = currentUpdatedFilterValue != $siteSearchUpdatedFilterInput.val();
167
168        return searchTermHasChanged || sectionFilterHasChanged || updatedFilterHasChanged;
169    };
170
171    var updateCurrentSearchValues = function () {
172        currentSearchTerm = $siteSearchSearchTermInput.val();
173
174        currentSectionFilterValue = $siteSearchSectionFilterInput.val();
175        currentUpdatedFilterValue = $siteSearchUpdatedFilterInput.val();
176    };
177
178    var runSearch = function ($parsedResultsHtml) {
179        resetCounters();
180
181        if ($parsedResultsHtml == null) {
182            // error
183            populateNoResultsFound();
184        } else {
185            populateCounters($parsedResultsHtml);
186
187            if (totalResults > 0) {
188                populateSearchResults($parsedResultsHtml);
189            } else {
190                populateNoResultsFound();
191            }
192
193            toggleElementVisibility();
194        }
195
196        updateCurrentSearchValues();
197        blurFormInputs();
198    };
199
200    var runSearchPaging = function ($parsedResultsHtml) {
201        if ($parsedResultsHtml != null) {
202            populateCounters($parsedResultsHtml);
203
204            if (totalResults > 0) {
205                // if the button was shown then there should be results - just a check
206
207                appendSearchResults($parsedResultsHtml);
208            }
209
210            toggleElementVisibility();
211        }
212    };
213
214    // UI bindings
215
216    $siteSearchToggleButtons.on('click', function () {
217        if ($(this).hasClass(activeClass)) {
218            hideSiteSearch();
219        } else {
220            showSiteSearch();
221        }
222    });
223
224    $siteSearchForm.on('submit', function (e) {
225        //guard
226
227        if (searchHasChanged() && $siteSearchSearchTermInput.val().length > 2) {
228            resetCounters();
229            getSearchResultsAjax(runSearch);
230        }
231        e.preventDefault();
232    });
233
234    $loadMoreResultsButton.on('click', function () {
235        currentResultsPage++;
236        $siteSearchPageNumberInput.val(currentResultsPage);
237        getSearchResultsAjax(runSearchPaging);
238        $siteSearchResultsWrapper.find('.site_search_result:first-child .site_search_result__heading').focus();
239    })
240};