https://www.town.koori.fukushima.jp/ssi/js/search-trend.js

1document.addEventListener('DOMContentLoaded', function() {
2    /**
3     * 指定されたコンテナ内の「よく検索されるキーワード」に検索機能を設定する関数
4     * @param {HTMLElement} containerElement - 対象となるコンテナ要素
5     */
6    function initializeSearchTrend(containerElement) {
7        if (!containerElement) {
8            return;
9        }
10
11        const trendParagraph = containerElement.querySelector('p');
12        if (!trendParagraph) {
13            return;
14        }
15
16        // ▼▼▼【ここから修正】▼▼▼
17        // 処理対象に<a>タグがまだ含まれていない（未処理の）場合のみ、HTMLの生成処理を行う
18        const isAlreadyFormatted = trendParagraph.querySelector('a') !== null;
19
20        if (!isAlreadyFormatted) {
21            const trendAlltext = trendParagraph.innerHTML;
22            const trendArry = trendAlltext.split(/\r\n|\r|\n/).map(line => line.trim()).filter(line => line);
23
24            // HTMLを一度クリア
25            trendParagraph.innerHTML = ''; 
26
27            for (let i = 0; i < trendArry.length; i++) {
28                if (trendArry[i].includes('href')) {
29                    trendParagraph.insertAdjacentHTML('beforeend', trendArry[i]);
30                } else {
31                    const linkHTML = `<a tabindex="0">${trendArry[i]}</a>`;
32                    trendParagraph.insertAdjacentHTML('beforeend', linkHTML);
33                }
34            }
35        }
36        // ▲▲▲【修正はここまで】▲▲▲
37
38        // イベントリスナーの設定は、処理済みかどうかに関わらず毎回実行する
39        // (cloneNodeで複製された要素にはリスナーが引き継がれないため)
40        const trendLinks = trendParagraph.querySelectorAll('a');
41        const queryInput = document.querySelector('#tmp_query');
42        const submitButton = document.querySelector('#submit');
43
44        if (!queryInput || !submitButton) {
45            return;
46        }
47
48        trendLinks.forEach(link => {
49            // 既に追加済みのリスナーを削除してから追加することで、二重登録を防ぐ
50            link.removeEventListener('click', eventHandler);
51            link.removeEventListener('keypress', keypressHandler);
52            
53            link.addEventListener('click', eventHandler);
54            link.addEventListener('keypress', keypressHandler);
55        });
56    }
57
58    // イベントハンドラを関数の外で定義
59    function eventHandler() {
60        const queryInput = document.querySelector('#tmp_query');
61        queryInput.style.backgroundImage = 'none';
62        queryInput.value = this.textContent;
63        document.querySelector('#submit').click();
64    }
65
66    function keypressHandler(e) {
67        if (e.key === 'Enter') {
68            eventHandler.call(this);
69        }
70    }
71
72    // 元のヘッダーにあるキーワードを初期化
73    const originalSearchTrend = document.querySelector('.site-header-top #search_trend_word, .site-header-lower #search_trend_word');
74    initializeSearchTrend(originalSearchTrend);
75
76    // グローバルスコープに関数を公開
77    window.initializeSearchTrend = initializeSearchTrend;
78});