Search Toggle

(function () {


    'use strict';

    Handlebars.registerHelper('greaterThan', function (v1, v2, options) {

        'use strict';
           if (v1>v2) {
             return options.fn(this);
          }
          return options.inverse(this);
        }); 

    // compile the template
    var templateSearchResults = Handlebars.compile(
        '<div id=\"header-search-results\" style=\"display: none\">' + 
            '<div class=\"header-search-title\">' + 
                '<h1 class=\"atm-heading \">{{searchResults.length}} ' + 
                '{{#greaterThan searchResults.length 1}}' +
                '{{uiSearchResults}}' +
                '{{else}}' +
                '{{uiSearchResult}}' +
                '{{/greaterThan}}' + 
            '<\/div>' + 
            '<div id=\"header-search-results\">' + 
            '{{#each searchResults}}' + 
            '<div class=\"mol-search-result js--clickable\">' + 
                '<a class=\"atm-link \" href=\"{{Href}}\" title=\"{{uiSearchView}} {{uiSearchResult}}\" aria-label=\"{{uiSearchView}} {{uiSearchResult}}\">{{Title}}<\/a>' + 
                '<div class=\"atm-paragraph \">' + 
                    '<p>{{{Summary}}}<\/p>' + 
                '<\/div>' + 
            '<\/div>' + 
            '{{/each}}'  + 
            '<\/div>'  + 
            '<div class=\"header-search-button\">'  + 
                '<a class=\"atm-button atm-button-secondary button-md\" href=\"{{searchUrl}}?q={{query}}\">'  + 
                    '<span class=\"button-content\">'  + 
                        '<span>{{uiSearchView}} {{searchResults.length}} ' + 
                        '{{#greaterThan searchResults.length 1}}' +
                        '{{uiSearchResults}}' +
                        '{{else}}' +
                        '{{uiSearchResult}}' + 
                        '{{/greaterThan}}' + 
                        '</span>'  + 
                        '<span class=\"atm-icon far fa-long-arrow-right\"><\/span>'  + 
                    '<\/span>'  + 
                    '<span class=\"button-underline\"><\/span>'  + 
                '</a>'  + 
            '</div>'  + 
        '<\/div>'
    );


    $('.mol-search-toggle').on('click', function (e) {

        e.preventDefault();
        $('#mol-header-search').addClass('opened');
        $('#headersearch').focus();

        let $searchForm = $('#headersearch').closest("form");

        $("#headersearch").on('change keyup paste', function(){

            let searchTerm = $("#headersearch").val();

            $('#header-search-results').remove();

            if (searchTerm.length >= 3) {

                $.ajax({
                    url: '/umbraco/api/search/getsearchresults',
                    method: 'GET',
                    data: { q : searchTerm, websiteId : $('body').data('website-id') },
                    dataType: 'json',
                    success: function(results) {
                        if (results && results.length > 0){
                            $('#header-search-results').remove();
                            $('#mol-header-search').append(templateSearchResults({ 
                                searchResults: results, 
                                searchUrl: $searchForm.attr('action'), 
                                query: searchTerm, 
                                uiSearchResult: $searchForm.data('ui-search-result'),
                                uiSearchResults: $searchForm.data('ui-search-results'),
                                uiSearchView: $searchForm.data('ui-search-view'),
                             }));
                            $('#header-search-results').fadeIn(250);
                        } else {
                            $('#header-search-results').fadeOut(250);
                        }
                    },
                    error: function() {
                        console.log('Error occured');
                    }
                });

            }

        });
    });

})();