https://premium-water.net/page/wp-content/plugins/my-realtime-search/search.js

1document.addEventListener("DOMContentLoaded", function () {
2  const categoryButtons = document.querySelectorAll('.category-filter');
3  const customFieldButtons = document.querySelectorAll('.custom-field-filter');
4  const additionalFieldButtons1 = document.querySelectorAll('.additional-field-filter-1');
5  const additionalFieldButtons2 = document.querySelectorAll('.additional-field-filter-2');
6  const resultList = document.getElementById('search-results');
7  const noResultsText = document.getElementById('no-results');
8  const moreLoadingIcon = document.getElementById('more-loading-icon');
9  const listLoadingIcon = document.getElementById('list-loading-icon');
10  const loadingIconElement = document.getElementById('next-loading');
11
12  let currentPage = 1;
13  let hasNoResults = false;
14  let selectedCategories = [];
15  let selectedFields = [];
16  let selectedAdditionalFields1 = [];
17  let selectedAdditionalFields2 = [];
18  let isFetching = false; // 追加: 検索処理中のフラグ
19
20  function fetchSearchResults(page = 1, append = false) {
21    if (hasNoResults || isFetching) return; // フラグが true の場合は処理をスキップ
22    isFetching = true; // 検索処理開始
23
24    const params = new URLSearchParams({
25      action: 'my_search',
26      page: page,
27      categories: JSON.stringify(selectedCategories),
28      fields: JSON.stringify(selectedFields),
29      additionalFields1: JSON.stringify(selectedAdditionalFields1),
30      additionalFields2: JSON.stringify(selectedAdditionalFields2)
31    });
32
33    // 初期ロードや検索時（append = false）の場合
34    if (!append) {
35      observer.disconnect(); // スクロール読み込みを無効化
36      // resultList.innerHTML = '';
37      listLoadingIcon.style.display = 'block';
38      moreLoadingIcon.style.display = 'none';
39      resultList.style.opacity = 0.1;
40    } else {
41      listLoadingIcon.style.display = 'none';
42      moreLoadingIcon.style.display = 'block';
43    }
44
45    fetch(`${ajaxurl}?${params.toString()}`)
46      .then(response => response.json())
47      .then(responseData => {
48        if (!append) {
49          resultList.innerHTML = '';
50          moreLoadingIcon.style.display = 'none';
51        }
52
53        // 全ヒット件数を更新
54        const totalHits = responseData.total_count || 0;
55        document.getElementById('search-result-count-number').textContent = totalHits;
56
57        if (responseData.success && Array.isArray(responseData.data) && responseData.data.length > 0) {
58          noResultsText.style.display = 'none';
59          hasNoResults = false;
60
61          responseData.data.forEach(item => {
62            const li = document.createElement('li');
63            const link = document.createElement('a');
64            const img = document.createElement('img');
65            img.src = item.thumbnail;
66            img.alt = item.title;
67            img.style.width = '100%';
68            img.addEventListener('load', function () {
69              img.classList.remove('loading');
70              if (document.querySelectorAll('img.loading').length === 0) {
71                moreLoadingIcon.style.display = 'none';
72                listLoadingIcon.style.display = 'none';
73              }
74            });
75            img.classList.add('loading');
76            link.href = item.link;
77            link.innerHTML = '<p>' + item.title + 'さまのお部屋</p>';
78            link.prepend(img);
79            li.appendChild(link);
80            resultList.appendChild(li);
81          });
82
83          if (responseData.data.length < 20) {
84            moreLoadingIcon.style.display = 'none';
85            listLoadingIcon.style.display = 'none';
86            hasNoResults = true;
87            resultList.style.opacity = 1;
88          } else {
89            resultList.style.opacity = 1;
90          }
91
92        } else {
93          noResultsText.style.display = 'block';
94          moreLoadingIcon.style.display = 'none';
95          listLoadingIcon.style.display = 'none';
96          hasNoResults = true;
97        }
98
99        resultList.style.opacity = 1;
100        isFetching = false; // 検索処理終了
101        observer.observe(loadingIconElement); // スクロール監視を再開
102      })
103      .catch(error => {
104        console.error('Error:', error);
105        noResultsText.style.display = 'block';
106        moreLoadingIcon.style.display = 'none';
107        isFetching = false;
108        observer.observe(loadingIconElement); // スクロール監視を再開
109      });
110  }
111
112  const observer = new IntersectionObserver((entries) => {

113    entries.forEach(entry => {
114      if (entry.isIntersecting && !hasNoResults && !isFetching) {
115        currentPage++;
116        fetchSearchResults(currentPage, true);
117        moreLoadingIcon.style.display = 'block';
118      }
119    });
120  }, {
121    root: null,
122    rootMargin: '0px',
123    threshold: 0.1
124  });
125
126  if (loadingIconElement) {
127    observer.observe(loadingIconElement);
128  }
129
130  function resetSearchAndFetch() {
131    hasNoResults = false;
132    noResultsText.style.display = 'none';
133    currentPage = 1;
134    fetchSearchResults(currentPage, false);
135  }
136
137  categoryButtons.forEach(button => {
138    button.addEventListener('click', function (e) {
139      e.preventDefault();
140      const category = button.getAttribute('data-category');
141      if (selectedCategories.includes(category)) {
142        selectedCategories = selectedCategories.filter(cat => cat !== category);
143        button.classList.remove('active');
144      } else {
145        selectedCategories.push(category);
146        button.classList.add('active');
147      }
148      resetSearchAndFetch();
149    });
150  });
151
152  customFieldButtons.forEach(button => {
153    button.addEventListener('click', function (e) {
154      e.preventDefault();
155      const field = button.getAttribute('data-field');
156      if (selectedFields.includes(field)) {
157        selectedFields = selectedFields.filter(f => f !== field);
158        button.classList.remove('active');
159      } else {
160        selectedFields.push(field);
161        button.classList.add('active');
162      }
163      resetSearchAndFetch();
164    });
165  });
166
167  additionalFieldButtons1.forEach(button => {
168    button.addEventListener('click', function (e) {
169      e.preventDefault();
170      const field = button.getAttribute('data-field');
171      if (selectedAdditionalFields1.includes(field)) {
172        selectedAdditionalFields1 = selectedAdditionalFields1.filter(f => f !== field);
173        button.classList.remove('active');
174      } else {
175        selectedAdditionalFields1.push(field);
176        button.classList.add('active');
177      }
178      resetSearchAndFetch();
179    });
180  });
181
182  additionalFieldButtons2.forEach(button => {
183    button.addEventListener('click', function (e) {
184      e.preventDefault();
185      const field = button.getAttribute('data-field');
186      if (selectedAdditionalFields2.includes(field)) {
187        selectedAdditionalFields2 = selectedAdditionalFields2.filter(f => f !== field);
188        button.classList.remove('active');
189      } else {
190        selectedAdditionalFields2.push(field);
191        button.classList.add('active');
192      }
193      resetSearchAndFetch();
194    });
195  });
196
197  fetchSearchResults();
198});
199
200
201
202$(function () {
203  if (isMobile.phone) {
204    $('#category-filters').hide();
205    $('#custom-field-filters').hide();
206    $('#additional-field-filters-1').hide();
207    $('#additional-field-filters-2').hide();
208    $('.accordion-title').on('click', function () {
209      $(this).next().slideToggle(400);
210      $(this).toggleClass('open');
211    });
212  } else {
213    $('.realtime-search-detail').hide();
214    $('.realtime-search-more').on('click', function () {
215      $(this).prev().slideToggle(400);
216      $(this).toggleClass('open');
217      if ($(this).hasClass('open')) {
218        $(this).text("閉じる");
219      } else {
220        $(this).text("もっと見る");
221      }
222    });
223  }
224});