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