https://www.icex.es/etc.clientlibs/icex-elena/components/content/c…ibs.min.e2e14a604524db756c29b6e037c22310.js

1document.addEventListener("DOMContentLoaded", () => {
2	CountryRegion_v2.init();
3});
4
5const CountryRegion_v2 = {
6	inputSearch: document.querySelector("#inputSearchCR"),
7	suggestions: document.querySelector("#suggestions-searchCR"),
8	max: 6,
9	maxHeight: document.querySelector(".country-region-v2 .container-general").dataset.maxheight,
10
11	init() {
12		CountryRegion_v2.events();
13		if (CountryRegion_v2.maxHeight) CountryRegion_v2.setHeight();
14	},
15
16	events() {
17        window.addEventListener("scroll", () => {
18			CountryRegion_v2.suggestions.classList.remove("country-search-results-wrapper--show");
19		});
20
21        if (CountryRegion_v2.maxHeight) {
22            window.addEventListener("resize", () => { CountryRegion_v2.setHeight() });
23        }
24
25        CountryRegion_v2.inputSearch?.addEventListener("input", CountryRegion_v2.handleSearch)
26
27        CountryRegion_v2.inputSearch?.addEventListener('keyup', (evt) => {
28            CountryRegion_v2.handlerInputSearch(evt)
29        })
30	},
31
32    setHeight() {
33		const textHeight = document.querySelector(".country-region-v2 .container__title")?.offsetHeight;
34
35		const imgWrapper = document.querySelector(".country-region-v2 .container__img");
36		if (imgWrapper) imgWrapper.style.maxHeight = `${textHeight + 100}px`;
37	},
38
39    handleSearch() {
40        const input = CountryRegion_v2.inputSearch
41
42        if (input.value == '') {
43            CountryRegion_v2.suggestions.classList.remove("country-search-results-wrapper--show");
44            return
45        }
46
47        const searchChars = 3
48        if (input.value.length < searchChars) return
49
50        CountryRegion_v2.getCountriesWhileTyping()
51    },
52
53    showSearchResults (input, resultados) {
54        const suggestions_filters = CountryRegion_v2.suggestions.querySelector(".js-dropdown-filter");
55        let count = 0;
56        suggestions_filters.innerHTML = "";
57
58        for (const resultado of resultados) {
59            const name = resultado[1].name;
60            const code = resultado[1].path;
61
62            let filter_letters = new RegExp(
63                input.value
64                  .replace(/[aá]/gi, '[aá]')
65                  .replace(/[eé]/gi, '[eé]')
66                  .replace(/[ií]/gi, '[ií]')
67                  .replace(/[oó]/gi, '[oó]')
68                  .replace(/[uú]/gi, '[uú]'),
69                'gi'
70            );
71
72            if (count == CountryRegion_v2.max) return;
73
74            /*Creamos nuevo tag*/
75            let newTag = document.createElement("a");
76            newTag.className = "option js-option";
77            newTag.href=code;
78
79            if (count < Math.round(CountryRegion_v2.max / 2)) {
80                // newTag.className = "option visited js-option"
81                newTag.className = "option js-option";
82            }
83
84            newTag.dataset.name = name
85            newTag.dataset.countrycode = code
86
87            let p = document.createElement("p");
88            p.className = "js-option-value";
89            p.innerHTML = name.replace(filter_letters, function (str) {
90                return '<b class="match">' + str + "</b>";
91            });
92            newTag.appendChild(p);
93
94            /*Metemos el tag en la seción de tags*/
95            suggestions_filters.appendChild(newTag);
96
97            count++
98        }
99        //NewSelect.inputSelect()
100    },
101
102    getCountriesWhileTyping() {
103        const input = CountryRegion_v2.inputSearch
104        const pathSearch = document.querySelector(".js-path-search").dataset.pathsearch;
105
106        const servletPath = "/bin/icex-elena/search-business-center.json";
107        const params = new URLSearchParams({
108            filter: input.value || '',
109            path: pathSearch || '',
110        });
111		const url = window.location.origin + servletPath + '?' + params
112
113        fetch(url)
114			.then(response => response.json())
115			.then(response => {
116
117                let results = Object.entries(response.countries) // entries
118
119                if (results.length > 0) {
120                	CountryRegion_v2.suggestions.classList.add("country-search-results-wrapper--show");
121                    CountryRegion_v2.showSearchResults(input, results)
122                } else {
123                    CountryRegion_v2.suggestions.classList.remove("country-search-results-wrapper--show");
124                }
125            })
126			.catch(error => {
127                // CountryRegion_v2.suggestions.classList.remove("country-search-results-wrapper--show");
128				console.warn("Hubo un problema con la petición:" + error.message);
129			});
130    },
131
132    handlerInputSearch ( input ) {
133        const targetInput = input.target.closest('.search-wrapper')
134        if (!targetInput) return
135
136        const dropdownList = targetInput.querySelector('.country-search-results-wrapper')
137        if (!dropdownList) return 
138    
139        const allOptions = Array.from(dropdownList.querySelectorAll('.option'))
140        
141        if (allOptions.length === 0) return
142    
143        if (input.key === 'Enter') {
144            const focusedOption = allOptions.find(option => option.classList.contains('hoverOption')) || 
145                                  allOptions.find(option => option.matches(':focus')) || 
146                                  allOptions[0]
147            
148            allOptions.forEach(option => {
149                option.classList.remove('hoverOption')
150            })
151            focusedOption.classList.add('hoverOption')
152            focusedOption.click()
153        }
154    

155        if (input.key === 'ArrowDown' || input.key === 'ArrowUp') {
156            const currentHoverIndex = allOptions.findIndex(option => option.classList.contains('hoverOption'))
157            let nextIndex = currentHoverIndex === -1 ? -1 : currentHoverIndex
158
159            if (input.key === 'ArrowDown') {
160                nextIndex = (nextIndex + 1) % allOptions.length
161            } else {
162                nextIndex = (nextIndex - 1 + allOptions.length) % allOptions.length
163            }
164    
165            allOptions.forEach(option => option.classList.remove('hoverOption'))
166            const selectedOption = allOptions[nextIndex]
167            selectedOption.classList.add('hoverOption')
168            
169            selectedOption.scrollIntoView({
170                behavior: 'smooth', 
171                block: 'nearest'    
172            })
173        }
174    }
175
176};