Search forms

Hello, we have recently integrated Google Programmable Search Engine (GPSE) as our site search, replacing the native WordPress search. To make this work with the theme’s search elements, we implemented a small JavaScript function ( fixSearchForms() ) which you can see in the page source (greekreporter.com). The script handles:

• Redirecting all search form submissions ( classes tdb-search-form and td-search-form ) to our GPSE results page.
• Rewriting the ” View all results “ link in the mobile live search dropdown to point to the GPSE results page with the correct query parameter (?q= instead of ?s=).

This covers both the desktop Header Live Search element and the Mobile Live search element. We have two questions:

1. Is this the recommended approach for integrating an external search engine with the theme’s search elements, or is there a more native/supported method we may have missed – either through tagDiv Composer settings or theme options – that would handle the form redirects and button links without requiring a custom script?
2. Is there an official hook, filter or supported method to replace the live search AJAX results (currently using WordPress native search) with results from an external search API like GPSE, while keeping the existing live search UI and dropdown intact?

If option (2) is not currently supported, are there any theme-native alternatives you would recommend for live search functionality?

Additionally, is there a way to limit or restrict the native live search results to improve response speed? When a query returns many results the delay is significant, and since only the first 3-4 results are displayed in the dropdown, could we somehow cap the number of results the query returns to reduce that latency? We consider this a viable alternative if replacing the live search with GPSE results is not easily achievable, especially since the ” View all results “ link already redirects to the GPSE results page as mentioned above. Thank you!

Best regards,

• This topic was modified 5 months by anastasios.

Hello, thank you for your reply! Regarding the screenshot you provided — we are already using the approach shown, but we don’t see a direct GPSE redirect option there. Could you clarify what exactly you meant by “redirecting to GPSE directly” in that screenshot?

Also, the element we use on mobile is the Mobile Live Search element (not the Header Live Search), and it doesn’t include the same options you referenced (). Is there an equivalent option available for the Mobile Live Search element as well? Thank you!

Hey anastasios,

can you explain how you dit it ?

I can see this code in your page source, but don’t know what to do with it ?

// Fix all search forms
var forms = document.querySelectorAll(‘form.tdb-search-form, form.td-search-form’);
forms.forEach(function(form) {
if (!form.dataset.fixed) {
form.setAttribute(‘action’, ‘https://greekreporter.com/search_gcse/’);
var input = form.querySelector(‘input[name=”s”]’);
if (input) {
input.setAttribute(‘name’, ‘q’);
}
form.dataset.fixed = ‘true’;
}
});

// Fix “View all results” links
var links = document.querySelectorAll(‘.result-msg a[href*=”?s=”]’);
links.forEach(function(link) {
if (!link.dataset.fixed) {
var query = new URL(link.href).searchParams.get(‘s’);
if (query) {
link.href = ‘https://greekreporter.com/search_gcse/?q=’ + encodeURIComponent(query);
}
link.dataset.fixed = ‘true’;
}
});

would be much appreciated !

thank you !