http://velomotion.de/wp-content/themes/magazine-pro/js/vm-gcse-search.js?ver=6.8.10

1(function ($) {
2    $(() => {
3        const inputSearch = $('#id-query');
4        const realTimeSearchResetBtn = $('#realtime-search-reset-btn');
5        const expandBtn = $('#vm-realtime-search-btn-expand');
6        const expandedBlock = $('#vm-realtime-search-expanded-block-result');
7        const searchBtn = $('#vm-realtime-search-btn');
8
9        let timeout;
10
11        const crossSvg = `
12            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024" class="vm-button__icon">
13            <path d="M557.2 512l136.4-136.4c12.4-12.4 12.4-32.8 0-45.2s-32.8-12.4-45.2 0l-136.4 136.4-136.4-136.4c-12.4-12.4-32.8-12.4-45.2 0-6.2 6.2-9.4 14.4-9.4 22.6s3.2 16.4 9.4 22.6l136.4 136.4-136.4 136.4c-6.2 6.2-9.4 14.4-9.4 22.6s3.2 16.4 9.4 22.6c12.4 12.4 32.8 12.4 45.2 0l136.4-136.4 136.4 136.4c12.4 12.4 32.8 12.4 45.2 0s12.4-32.8 0-45.2l-136.4-136.4z"></path>
14            </svg>
15        `;
16
17        const searchSvg = `
18            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024" class="vm-button__icon">
19                <path d="M887 840.4l-213.6-215.6c41.8-52.4 67-118.8 67-191 0-169-137-306-306.2-306s-306.2 137.2-306.2 306.2 137 306 306.2 306c73.2 0 140.2-25.6 193-68.4l212.2 214.2c6.4 6.8 15.2 10.2 23.8 10.2 8.2 0 16.4-3 22.6-9 13.2-12.6 13.6-33.4 1.2-46.6zM434.2 674.2c-64.2 0-124.6-25-170-70.4s-70.4-105.8-70.4-169.8c0-64.2 25-124.6 70.4-169.8 45.4-45.4 105.8-70.4 170-70.4s124.6 25 170 70.4c45.4 45.4 70.4 105.8 70.4 169.8 0 64.2-25 124.6-70.4 169.8-45.4 45.4-105.8 70.4-170 70.4z"></path>
20            </svg>
21        `;
22
23        inputSearch.on('keyup', function (event) {
24            if (event.currentTarget.value.trim()){
25                displayResetBtn();
26            }
27        });
28
29        searchBtn.on('click', function () {
30            const query = inputSearch.val();
31            if (query.trim().length > 2) {
32                google.search.cse.element.getElement("searchresults-only0").execute(query);
33            }
34        });
35
36        inputSearch.on('keypress', function (event) { // search on enter key
37            if (event.which === 13) {
38                event.preventDefault();
39                searchBtn.click();
40            }
41        });
42
43        expandBtn.on('click', function () {
44            $(this).empty();
45            const hiddenClass = 'vm-realtime-search__bar--hidden';
46            if ($(expandedBlock).hasClass(hiddenClass)) {
47                $(this).append(crossSvg);
48                $(expandedBlock).removeClass(hiddenClass);
49                $(searchBtn).removeClass(hiddenClass);
50            } else {
51                $(this).append(searchSvg);
52                $(expandedBlock).addClass(hiddenClass);
53                $(inputSearch).val('');
54                $(searchBtn).addClass(hiddenClass);
55                hideResetBtn();
56            }
57        });
58
59        realTimeSearchResetBtn.on('click', function() {
60            $(inputSearch).val('');
61            hideResetBtn();
62        });
63
64
65        const displayResetBtn = () => {
66            $(realTimeSearchResetBtn).css("display", "flex");
67        }
68
69        const hideResetBtn = () => {
70            $(realTimeSearchResetBtn).css("display", "none");
71        }
72
73    })
74})(window.jQuery);