{"id":271455,"date":"2025-06-23T09:58:45","date_gmt":"2025-06-23T09:58:45","guid":{"rendered":"https:\/\/www.crysound.com\/affichage-de-la-recherche\/"},"modified":"2026-03-07T04:56:24","modified_gmt":"2026-03-07T04:56:24","slug":"affichage-de-la-recherche","status":"publish","type":"page","link":"https:\/\/design.crysound.com\/fr\/affichage-de-la-recherche\/","title":{"rendered":"Affichage de recherche"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
Technologie <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/i><\/span>\n\t\t\t<\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n
\n
\n
\n \n \n <\/svg>\n <\/div>\n
\n \n <\/path>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n
';\n formHTML += '
    ';\n\n const options = ['Product', 'Solution', 'Blog', 'Download'];\n options.forEach(function(option, index) {\n const checked = selectedTypes.includes(option) ? 'checked' : '';\n const count = filterCounts[option] || 0;\n const englishLabel = labelMap[option];\n \n formHTML += '
  • ';\n formHTML += '';\n formHTML += '' + englishLabel + '<\/span>';\n formHTML += '(' + count + ')<\/span>';\n formHTML += '<\/li>';\n \n if (index < options.length - 1) {\n formHTML += '
  • <\/li>';\n }\n });\n\n formHTML += '<\/ul><\/div><\/form>';\n shai.innerHTML = formHTML;\n\n const filterForm = document.getElementById('filter-form');\n if (filterForm) {\n filterForm.addEventListener('submit', function(e) {\n e.preventDefault();\n });\n filterForm.addEventListener('change', function() {\n const selected = Array.from(filterForm.querySelectorAll('input[name=\"type[]\"]:checked')).map(el => el.value);\n const url = new URL(window.location.href);\n url.searchParams.delete('paged');\n url.searchParams.delete('type');\n url.searchParams.delete('type[]');\n selected.forEach(t => url.searchParams.append('type[]', t));\n history.pushState({}, '', url.toString());\n fetchAndUpdate(url, (searchInput && searchInput.value) ? searchInput.value : '');\n });\n }\n }\n \n const searchInput = document.getElementById('real-time-search-input');\n const clearIcon = document.querySelector('.clear-icon');\n const searchBox = document.querySelector('.search-box');\n \n let isComposing = false;\n let lastValue = '';\n \n searchInput.addEventListener('compositionstart', function() {\n isComposing = true;\n lastValue = this.value;\n });\n \n searchInput.addEventListener('compositionend', function() {\n isComposing = false;\n triggerSearch(this.value);\n });\n\n let searchTimer;\n searchInput.addEventListener('input', function(e) {\n if (isComposing) {\n clearTimeout(searchTimer);\n searchTimer = setTimeout(() => {\n triggerSearch(this.value);\n }, 300);\n } \n else {\n clearTimeout(searchTimer);\n searchTimer = setTimeout(() => {\n triggerSearch(this.value);\n }, 300);\n }\n });\n \n searchInput.addEventListener('keydown', function(e) {\n if (e.key === 'Enter') {\n clearTimeout(searchTimer);\n triggerSearch(this.value);\n }\n });\n\n function fetchAndUpdate(url, cleanValueForHighlight) {\n fetch(url.toString(), { headers: {'X-Requested-With': 'XMLHttpRequest'} })\n .then(response => response.text())\n .then(html => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text\/html');\n const newResults = doc.querySelector('.search-loop-results');\n const newPagination = doc.querySelector('.pagination');\n\n const currentResults = document.querySelector('.search-loop-results');\n if (currentResults && newResults) {\n currentResults.innerHTML = newResults.innerHTML;\n }\n\n const currentPagination = document.querySelector('.pagination');\n if (newPagination) {\n if (currentPagination) {\n currentPagination.innerHTML = newPagination.innerHTML;\n } else if (currentResults) {\n const paginationContainer = document.createElement('div');\n paginationContainer.className = 'pagination';\n paginationContainer.innerHTML = newPagination.innerHTML;\n currentResults.after(paginationContainer);\n }\n } else if (currentPagination) {\n currentPagination.remove();\n }\n\n const updatedPagination = document.querySelector('.pagination');\n if (updatedPagination) {\n updatedPagination.addEventListener('click', handlePaginationClick);\n }\n\n if (typeof cleanValueForHighlight === 'string') {\n highlightSearchTerms(cleanValueForHighlight.replace(\/[\\s']+\/g, ''));\n }\n })\n .catch(error => console.error('Error:', error));\n }\n\n function triggerSearch(rawValue) {\n const cleanValue = rawValue.replace(\/[\\s']+\/g, '');\n \n const url = new URL(window.location.href);\n \n if (!cleanValue) {\n \/\/ \u6e05\u7a7a\u641c\u7d22\u65f6,\u4fdd\u7559s\u53c2\u6570\u4f46\u8bbe\u4e3a\u7a7a,\u8fd9\u6837\u9875\u9762\u4ecd\u88ab\u8bc6\u522b\u4e3a\u641c\u7d22\u9875\u9762\n url.searchParams.set('s', '');\n url.searchParams.delete('search_clean');\n url.searchParams.delete('paged');\n } else {\n url.searchParams.set('s', rawValue);\n url.searchParams.set('search_clean', cleanValue);\n url.searchParams.delete('paged');\n }\n \n if (url.toString() !== window.location.href) {\n history.pushState({}, '', url.toString());\n fetchAndUpdate(url, cleanValue || '');\n }\n }\n \n function highlightSearchTerms(cleanTerm) {\n if (!cleanTerm) return;\n \n const resultsContainer = document.querySelector('.search-loop-results');\n if (!resultsContainer) return;\n \n const pattern = cleanTerm.split('').join('\\\\s*');\n const regex = new RegExp(`(${pattern})`, 'gi');\n \n const elementsToHighlight = resultsContainer.querySelectorAll(\n 'h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-widget-text-editor .elementor-widget-container'\n );\n \n elementsToHighlight.forEach(el => {\n const originalHTML = el.innerHTML;\n el.innerHTML = originalHTML.replace(regex, '$1<\/span>');\n });\n }\n \n function escapeRegExp(string) {\n return string.replace(\/[.*+?^${}()|[\\]\\\\]\/g, '\\\\$&');\n }\n \n highlightSearchTerms('');\n \n window.addEventListener('popstate', function() {\n const urlParams = new URLSearchParams(window.location.search);\n const searchTerm = urlParams.get('s') || '';\n \n searchInput.value = searchTerm;\n clearIcon.style.display = searchTerm ? 'flex' : 'none';\n fetchAndUpdate(new URL(window.location.href), searchTerm);\n });\n \n function handlePaginationClick(e) {\n if (e.target.tagName === 'A') {\n e.preventDefault();\n \n const url = new URL(e.target.href);\n const page = url.searchParams.get('paged') || 1;\n \n const formData = new FormData();\n formData.append('action', 'ajax_pagination');\n formData.append('page', page);\n \n const currentParams = new URLSearchParams(window.location.search);\n for (const [key, value] of currentParams) {\n if (key !== 'paged') {\n formData.append(key, value);\n }\n }\n \n fetch('https:\/\/design.crysound.com\/wp-admin\/admin-ajax.php', {\n method: 'POST',\n body: formData\n })\n .then(response => response.text())\n .then(html => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, 'text\/html');\n \n const resultsContainer = document.querySelector('.search-loop-results');\n if (resultsContainer) {\n resultsContainer.innerHTML = doc.querySelector('.search-loop-results').innerHTML;\n }\n \n const paginationContainer = document.querySelector('.pagination');\n const newPagination = doc.querySelector('.pagination');\n if (newPagination) {\n if (paginationContainer) {\n paginationContainer.innerHTML = newPagination.innerHTML;\n } else if (resultsContainer) {\n const paginationContainerNew = document.createElement('div');\n paginationContainerNew.className = 'pagination';\n paginationContainerNew.innerHTML = newPagination.innerHTML;\n resultsContainer.after(paginationContainerNew);\n }\n } else if (paginationContainer) {\n paginationContainer.remove();\n }\n \n const newPaginationEl = document.querySelector('.pagination');\n if (newPaginationEl) {\n newPaginationEl.addEventListener('click', handlePaginationClick);\n }\n \n history.pushState(null, null, e.target.href);\n \n const searchInput = document.getElementById('real-time-search-input');\n if (searchInput) {\n highlightSearchTerms(searchInput.value.trim());\n }\n \n window.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n })\n .catch(error => console.error('Error:', error));\n }\n }\n \n const paginationContainer = document.querySelector('.pagination');\n if (paginationContainer) {\n paginationContainer.addEventListener('click', handlePaginationClick);\n }\n });\n <\/script>\n