This is a followup to my earlier question How can I get tabbed site and image search results using Google Programmable Search?

I'm now trying to add date and sort parameters to the two URLs as variables that retrieve the search results. One URL retrieves web results for the web tab, the other image result for the images tabs. With the output of the Select dropdown onchange event, I need to append the sorting parameters to the two search and image URLs and reload them both.

This is the select dropdown

<select id="selectsort" onchange="selectthesort()">
    <option value="">Sorted by relevance</option>
    <option value="&sort=date">Sort by date</option>
    <option value="&dateRestrict=d14&sort=date">Last two weeks by date</option>
</select>

that by default option value (Sort by relevance) does not append to the URLs, since search results are by default already sorted by relevance by Google.

But for the other two options, I need to append either &sort=date to the URL when "Sort by date" is selected, or &dateRestrict=d14&sort=date when "Last two weeks by date" is selected, to each of these two URL variables:

One is for the web tab: jsElm.src = ";cx=cx&start="+start+"&q="+query+"&callback=hndlr";

And this one is for the Images tab: jsElmIM.src = ";cx=cx&start="+start+"&q="+query+"&searchType=image&callback=hndlrimages";

I.e. I need to do this:

When "Sort by date" is selected, append &sort=date to the jsElm.src URL jsElm.src = ";cx=cx&start="+start+"&q="+query+"&callback=hndlr";

to get this:

jsElm.src = ";cx=cx&start="+start+"&q="+query+"&callback=hndlr&sort=date";

And append the same to the jsElmIM.src URL.

I've already got

var sortoptions;
function selectthesort(){
sortoptions = document.getElementById('selectsort').value;
console.log(sortoptions);
}

and that outputs the strings I need to append to the two search URLs.

Would I concatenate variables? Or append? Or use some other method?

And then how do I "fire" the URL to update/reload?

This is a followup to my earlier question How can I get tabbed site and image search results using Google Programmable Search?

I'm now trying to add date and sort parameters to the two URLs as variables that retrieve the search results. One URL retrieves web results for the web tab, the other image result for the images tabs. With the output of the Select dropdown onchange event, I need to append the sorting parameters to the two search and image URLs and reload them both.

This is the select dropdown

<select id="selectsort" onchange="selectthesort()">
    <option value="">Sorted by relevance</option>
    <option value="&sort=date">Sort by date</option>
    <option value="&dateRestrict=d14&sort=date">Last two weeks by date</option>
</select>

that by default option value (Sort by relevance) does not append to the URLs, since search results are by default already sorted by relevance by Google.

But for the other two options, I need to append either &sort=date to the URL when "Sort by date" is selected, or &dateRestrict=d14&sort=date when "Last two weeks by date" is selected, to each of these two URL variables:

One is for the web tab: jsElm.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&callback=hndlr";

And this one is for the Images tab: jsElmIM.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&searchType=image&callback=hndlrimages";

I.e. I need to do this:

When "Sort by date" is selected, append &sort=date to the jsElm.src URL jsElm.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&callback=hndlr";

to get this:

jsElm.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&callback=hndlr&sort=date";

And append the same to the jsElmIM.src URL.

I've already got

var sortoptions;
function selectthesort(){
sortoptions = document.getElementById('selectsort').value;
console.log(sortoptions);
}

and that outputs the strings I need to append to the two search URLs.

Would I concatenate variables? Or append? Or use some other method?

And then how do I "fire" the URL to update/reload?

• javascript
• google-custom-search
• google-search-api

• What's your distinction between concatenating and appending? I would check into using URLSearchParams. – mykaf Commented Feb 6 at 20:10
• IDK, I hadn't seen those. Would they work? – BlueDogRanch Commented Feb 6 at 20:12
• IMO, URLSearchParams make it really easy to add/update parameters as needed and are a lot neater than concatenating strings. Just don't forget to stringify() when adding on to your base URL. – mykaf Commented Feb 6 at 20:25
• Then window.location to navigate. – mykaf Commented Feb 6 at 20:27
• I don't know if I can or should use or change the window.location; the API loads search results. – BlueDogRanch Commented Feb 6 at 20:40

1 Answer 1

Implementing URL Sorting for Google Custom Search

This document explains how to implement sorting functionality for Google Custom Search URLs using JavaScript.

HTML Structure

<select id="selectsort" onchange="selectthesort()">
    <option value="">Sorted by relevance</option>
    <option value="&sort=date">Sort by date</option>
    <option value="&dateRestrict=d14&sort=date">Last two weeks by date</option>
</select>

JavaScript Implementation

1. Initialize Variables

var sortoptions;
var jsElm, jsElmIM; // Your search iframe elements

2. Select Change Handler

function selectthesort() {
    sortoptions = document.getElementById('selectsort').value;
    updateSearchUrls();
}

3. URL Update Function

function updateSearchUrls() {
    // Web Search URL
    jsElm.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&callback=hndlr" + sortoptions;

    // Image Search URL
    jsElmIM.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&searchType=image&callback=hndlrimages" + sortoptions;
}

4. Reloading the Search

function reloadSearch() {
    // Assuming you're using iframes for the search results
    document.getElementById('webSearchFrame').contentWindow.location.reload();
    document.getElementById('imageSearchFrame').contentWindow.location.reload();
}

Complete Example

var sortoptions;
var jsElm = document.getElementById('webSearchFrame');
var jsElmIM = document.getElementById('imageSearchFrame');

function selectthesort() {
    sortoptions = document.getElementById('selectsort').value;
    updateSearchUrls();
    reloadSearch();
}

function updateSearchUrls() {
    jsElm.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&callback=hndlr" + sortoptions;
    jsElmIM.src = "https://www.googleapis.com/customsearch/v1?key=key&cx=cx&start="+start+"&q="+query+"&searchType=image&callback=hndlrimages" + sortoptions;
}

function reloadSearch() {
    jsElm.contentWindow.location.reload();
    jsElmIM.contentWindow.location.reload();
}

Notes

1. Replace key, cx, start, and query with your actual values
2. Ensure your iframe elements have correct IDs
3. Handle any potential URL encoding requirements
4. Consider adding error handling for invalid selections