<!--
Copyright (c) 2008 Google Inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</style>
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script>
<script type="text/javascript">
google.load('search', '1');
onload = function() {
google.search.Search.getBranding('branding');
//google branding
var searchResultsContainer = document.getElementById('searchResults');
var newsSearch = new google.search.NewsSearch();
newsSearch.setSearchCompleteCallback(this, function() {
if (newsSearch.results && newsSearch.results.length > 0) {
searchResultsContainer.style.display = 'block';
for (var i=0; i<newsSearch.results.length; i++) {
var wrapper = document.createElement('div');
var node = newsSearch.results[i].html.cloneNode(true);
wrapper.className = 'gs-result';
wrapper.appendChild(node);
searchResultsContainer.appendChild(wrapper);
}
}
},null);
newsSearch.execute("sport");
//keyword
}
</script>
</head>
<body>
<div>
<div id="branding" style="float:left;"></div>
<div id="searchResults"></div>
</div>
</body>
</html>
Hi, I want to make a Google news search, the above code runs well. However, I want to separate a js function. I use the following code, but the result shows nothing. How to modify it correctly?
<!--
Copyright (c) 2008 Google Inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</style>
<script src="https://www.google.com/jsapi?key=ABQIAAAAeEJvEumzGBw8dvenGPw1bRTcyTBaKMmwi780-Sh78Ay3Pg36mBRsO3t_v4eega6kiiiRMl84WG-4eA"></script>
<script type="text/javascript">
google.load('search', '1');
function searchcomplete() {
var newsSearch = new google.search.NewsSearch();
if (newsSearch.results && newsSearch.results.length > 0) {
searchResultsContainer.style.display = 'block';
for (var i=0; i<newsSearch.results.length; i++) {
var wrapper = document.createElement('div');
var node = newsSearch.results[i].html.cloneNode(true);
wrapper.className = 'gs-result';
wrapper.appendChild(node);
searchResultsContainer.appendChild(wrapper);
}
}
}
onload = function() {
google.search.Search.getBranding('branding');
//google branding
var searchResultsContainer = document.getElementById('searchResults');
var newsSearch1 = new google.search.NewsSearch();
newsSearch1.setSearchCompleteCallback(this, searchcomplete ,null);
newsSearch1.execute("sport");
//keyword
}
</script>
</head>
<body>
<div>
<div id="branding" style="float:left;"></div>
<div id="searchResults"></div>
</div>
</body>
</html>
Rich
5,7519 gold badges45 silver badges63 bronze badges
asked Dec 18, 2010 at 16:45
yuli chika
9,24120 gold badges79 silver badges123 bronze badges
2 Answers 2
A couple of problems here:
function searchcomplete() {
// you create a... uh new empty search here?
var newsSearch = new google.search.NewsSearch();
...
// searchResultsContainer is NOT defined in this scope
searchResultsContainer.style.display = 'block';
...
}
onload = function() {
// this defines searchResultsContainer in the scope of the onload callback,
// but NOT in the global scope
var searchResultsContainer = document.getElementById('searchResults');
...
// the first param is the thing that 'this' in the callback will refer to
// in this case it's the window but you need to change this in order
//to get access to the results
newsSearch1.setSearchCompleteCallback(this, searchcomplete ,null);
...
}
And here's a fixed version:
function searchcomplete() {
// Huh, why this? See below...
if (this.results && this.results.length > 0) {
// get 'searchResultsContainer' here
var searchResultsContainer = document.getElementById('searchResults');
searchResultsContainer.style.display = 'block';
for (var i=0; i < this.results.length; i++) {
var wrapper = document.createElement('div');
....
}
window.onload = function() {
...
// here we supply newsSearch itself as the 'this' so we can access
// its properties inside the callback
newsSearch.setSearchCompleteCallback(newsSearch, searchcomplete ,null);
...
}
You should read up a bit on this and scoping.
answered Dec 18, 2010 at 17:15
Ivo Wetzel
46.8k17 gold badges102 silver badges112 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
I don't know why you tried to do it in this way, but it's the working code:
...
<script type="text/javascript">
google.load('search', '1');
var newsSearch, searchResultsContainer;
function searchcomplete() {
// var newsSearch = new google.search.NewsSearch();
if (newsSearch.results && newsSearch.results.length > 0) {
searchResultsContainer.style.display = 'block';
for (var i=0; i<newsSearch.results.length; i++) {
var wrapper = document.createElement('div');
var node = newsSearch.results[i].html.cloneNode(true);
wrapper.className = 'gs-result';
wrapper.appendChild(node);
searchResultsContainer.appendChild(wrapper);
}
}
}
onload = function() {
google.search.Search.getBranding('branding');
//google branding
searchResultsContainer = document.getElementById('searchResults');
newsSearch = new google.search.NewsSearch();
newsSearch.setSearchCompleteCallback(this, searchcomplete ,null);
newsSearch.execute("sport");
//keyword
}
</script>
...
- you don't have to define new variable
newsSearch - you should define
newsSearchandsearchResultsContainerglobally.
Happy coding :-)
answered Dec 18, 2010 at 17:13
Ehsan
1,9591 gold badge17 silver badges30 bronze badges
Comments
lang-js
<div id="searchResults"></div>is empty in the following code.