Ajax word lookup from google.com/dictionary

Question

caveat: I do not know how to write ajax or javascipt.

I am wanting to use the dictionary from google.com/dictionary on my school website. Much like the custom search engine available from Google.

I figure the easiest way is to use the URL and pass in the word as a parameter and have the results populated in a div located below the search box.

So I need a form where my students type in the word they are looking up and then that word is inserted into the proper location in the URL http://www.google.com/dictionary?aq=f&langpair=en|en&q=WORD INSERTED HERE&hl=en

Then the results need to be displayed in the same location as the search box, so my students are not navigating to another page.

Can this be done? If so how?

Any help would be appreciated.

Answer 1

Unfortunately most browsers restrict Ajax requests from one domain to another, so you can't easily make an ajax call to google.com for example.

If you're open to using an iframe, the below code might do want you want. It's just not quite as pretty.

<script>

function search(word) {
    var url = "http://www.google.com/dictionary?aq=f&amp;langpair=en|en&amp;q=" + word;
    document.getElementById("searchResult").src = url;
    showIframe();
}
function showIframe() {
    document.getElementById("searchResult").style.display = "";
}

function toggleIframe() {
    var display = document.getElementById("searchResult").style.display;
    if (display == "none") {
     display = "";
    } else {
     display = "none"
    }
    document.getElementById("searchResult").style.display = display;
}
</script>

<input type="text" id="word"/>
<input type="button" value="submit" onclick="search(document.getElementById('word').value)"/><br>
<a href="#" onclick="toggleIframe()">Toggle results</a><br/>
<iframe id="searchResult" width="500" height="200"></iframe>