https://www.mgp.fr/modules/internet-templates/javascript/pages/faq.js

1function debounce(func, timeout = 300){
2    let timer;
3    return (...args) => {
4        clearTimeout(timer);
5        timer = setTimeout(() => { func.apply(this, args); }, timeout);
6    };
7}
8
9function searchQuestion(searchValue, category) {
10    const myHeaders = new Headers();
11    myHeaders.append('Accept', 'application/json');
12    myHeaders.append('Content-Type', 'application/json');
13    fetch(searchForm,
14        {
15            method: 'POST',
16            headers: myHeaders,
17            body: JSON.stringify({'searchValue': searchValue, 'category': category})
18        }
19    ).then(reponse => {
20        if (!reponse.ok) {
21            console.log('Erreur HTTP :');
22        }
23        return reponse.json();
24    }).then(json => {
25        if (json.hasOwnProperty('result')) {
26            json.result.forEach(data => {
27                let details = document.createElement('details');
28                details.classList.add('details-border-fushia', 'bg-blanc', 'm-y-md');
29                let summary = document.createElement('summary');
30                summary.classList.add('text', 'icon-chevron-bottom');
31                summary.innerHTML = data.summary;
32                details.append(summary);
33                details.insertAdjacentHTML("beforeend", data.texte);

34                document.querySelector('.bloc-search--details').append(details);
35            })
36        }
37    });
38}
39
40function inputSearch(searchValue) {
41    document.querySelector(".bloc-search--details").innerHTML = '';
42    document.querySelectorAll('.catQuest').forEach(elt => {
43        elt.classList.remove('active')
44    });
45    searchQuestion(searchValue, "")
46}
47
48const processChange = debounce((searchValue) => inputSearch(searchValue));
49document.addEventListener("DOMContentLoaded", function () {
50    const firstCat = document.querySelector(".catQuest:first-child");
51    firstCat.classList.add('active');
52    const defaultCat = firstCat.getAttribute('data-category');
53    searchQuestion("", defaultCat);
54    document.querySelector('#faqSearch').addEventListener('keypress', function(e) {
55        if (e.keyCode === 13) {
56            e.preventDefault();
57        }
58    });
59    document.querySelector('#faqSearchInput').addEventListener('keyup', (e) => {
60        const searchValue = document.querySelector("#faqSearchInput").value;
61        if (e.keyCode === 13) {
62            e.preventDefault();
63        }
64        else if (searchValue.length > 1) {
65            processChange(searchValue);
66            return false;
67        }
68
69    });
70    document.querySelectorAll('.catQuest').forEach(elt => {
71        elt.addEventListener('click', (e) => {
72            e.preventDefault();
73            document.querySelector("#faqSearchInput").value = '';

74            document.querySelector(".bloc-search--details").innerHTML = '';
75            document.querySelectorAll('.catQuest').forEach(elt => {
76                elt.classList.remove('active')
77            });
78            elt.classList.add('active');
79            const category = elt.getAttribute('data-category');
80            searchQuestion("", category)
81        })
82    });
83});