https://bertoldhummel.de/typo3conf/ext/sitepackage_hummel/Resource…/ke-search-suggest-init.js?1788689878

1(function () {
2
3    function initSuggestForElement(input) {
4        const settings = window.keSearchSuggestSettings || {};
5        const typeNum = typeof settings.typeNum !== 'undefined' ? settings.typeNum : 145623;
6        const minChars = typeof settings.minChars !== 'undefined' ? settings.minChars : 3;
7        const maxChars = typeof settings.maxChars !== 'undefined' ? settings.maxChars : 30;
8        const suggestionBoxClassName = 'ke_search_sword-items';
9        const suggestionBoxItemClassName = 'ke_search_sword-item';
10        const endpoint = '/?type=' + typeNum;
11
12        if (!input || input._keSearchSuggestInitialized) return;
13
14        const rect = input.getBoundingClientRect();
15        if (rect.width === 0) return;
16
17        input._keSearchSuggestInitialized = true;
18
19        let suggestionBox;
20
21        function removeSuggestionBox() {
22            if (suggestionBox) {
23                suggestionBox.parentNode.removeChild(suggestionBox);
24                suggestionBox = null;
25            }
26        }
27
28        function showSuggestions(items) {
29            removeSuggestionBox();
30            if (!items || items.length === 0) return;
31
32            const rect = input.getBoundingClientRect();
33            const widthStyleValue = rect.width + 'px';
34
35            document.documentElement.style.setProperty('--ke-suggest-width', widthStyleValue);
36            document.documentElement.style.setProperty('--ke-suggest-top', rect.bottom + 'px');
37            document.documentElement.style.setProperty('--ke-suggest-left', rect.left + 'px');
38
39            suggestionBox = document.createElement('div');
40            suggestionBox.className = suggestionBoxClassName;
41            suggestionBox.style.position = 'fixed';
42            suggestionBox.style.zIndex = '99999';
43            suggestionBox.style.background = '#fff';
44            suggestionBox.style.border = '1px solid #ccc';
45            suggestionBox.style.width = widthStyleValue;
46            suggestionBox.style.top = rect.bottom + 'px';
47            suggestionBox.style.left = rect.left + 'px';
48
49            items.forEach(function (item) {
50                const div = document.createElement('div');
51                div.className = suggestionBoxItemClassName;
52                div.textContent = item;
53                div.style.padding = '8px';
54                div.style.cursor = 'pointer';
55                div.addEventListener('mousedown', function (e) {
56                    e.preventDefault();
57                    input.value = item;
58                    removeSuggestionBox();
59                });
60                suggestionBox.appendChild(div);
61            });
62
63            document.body.appendChild(suggestionBox);
64        }
65
66        input.addEventListener('input', function () {
67            const val = input.value.trim();
68            removeSuggestionBox();
69            if (val.length < minChars || val.length > maxChars) return;
70
71            fetch(endpoint + '&tx_kesearchsuggest_ajax[query]=' + encodeURIComponent(val))
72                .then(response => response.json())
73                .then(data => {
74                    const unique = Array.from(new Set(data)).filter(Boolean);
75                    showSuggestions(unique);
76                });
77        });
78
79        document.addEventListener('mousedown', function (e) {
80            if (suggestionBox && !suggestionBox.contains(e.target) && e.target !== input) {
81                removeSuggestionBox();
82            }
83        });
84
85        input.addEventListener('keydown', function (e) {
86            if (!suggestionBox) return;
87            const items = suggestionBox.querySelectorAll('.' + suggestionBoxItemClassName);
88            if (!items.length) return;
89            let index = Array.from(items).findIndex(item => item.classList.contains('active'));
90
91            if (e.key === 'ArrowDown') {
92                if (index < items.length - 1) {
93                    if (index >= 0) items[index].classList.remove('active');
94                    items[++index].classList.add('active');
95                    input.value = items[index].textContent;
96                } else if (index === -1 && items.length) {
97                    items[0].classList.add('active');
98                    input.value = items[0].textContent;
99                }
100                e.preventDefault();
101            } else if (e.key === 'ArrowUp') {
102                if (index > 0) {
103                    items[index].classList.remove('active');
104                    items[--index].classList.add('active');
105                    input.value = items[index].textContent;
106                }
107                e.preventDefault();
108            } else if (e.key === 'Enter') {
109                if (index >= 0) {
110                    input.value = items[index].textContent;
111                    removeSuggestionBox();
112                    e.preventDefault();
113                }
114            }
115        });
116    }
117
118    function initDesktop() {
119        // Desktop: ke_search_sword außerhalb des Overlays
120        const input = document.querySelector('#ke_search_sword:not(#searchOverlay #ke_search_sword)');
121        initSuggestForElement(input);
122    }
123
124    function initMobile() {
125        // Mobile: ke_search_sword innerhalb des Overlays
126        const input = document.querySelector('#searchOverlay #ke_search_sword');
127        initSuggestForElement(input);
128    }
129
130    document.addEventListener('DOMContentLoaded', initDesktop);
131
132    // Öffentliche API für Mobile-Initialisierung nach Overlay-Öffnung
133    window.keSearchSuggestInitMobile = initMobile;
134
135})();