this is a very very very fast search for WordPress posts and pages.
It uses the wp-rest and because there is no ajax it is just reading the existing rendered data from the wp-rest performance is really good.
if you have a big website with big traffic definitely use this with wp-rest cache plugin.
<div class="prefix-test-wrapper">
<input type="text" id="search-input" placeholder="Type to search..." style="width: 100%; padding: 8px; margin: 10px 0;">
<div id="search-results" style="margin-top: 20px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('search-input');
const resultsDiv = document.getElementById('search-results');
input.addEventListener('input', function() {
if (input.value.length > 0) {
fetch(`/wp-json/wp/v2/search?search=${encodeURIComponent(input.value)}`)
.then(response => response.json())
.then(results => {
resultsDiv.innerHTML = ''; // Clear previous results
results.forEach(result => {
const a = document.createElement('a');
a.textContent = result.title; // Assuming 'title' is the desired display property
a.href = result.url; // Assuming 'url' contains the link to the content
a.style.display = 'block'; // Make each result a block element
a.style.marginBottom = '10px'; // Add some spacing between results
resultsDiv.appendChild(a);
});
})
.catch(error => {
console.error('Error:', error);
resultsDiv.innerHTML = '<p>Error loading results.</p>';
});
} else {
resultsDiv.innerHTML = ''; // Clear results when input is cleared
}
});
});
</script>