While using different styles for larger displays and mobiles, I was forced to insert two google custom search boxes in same page. The search still works perfectly but the issue is that search predictions are no longer available after inserting the second search box.
(function() {
var cx = '*****************:**********';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
The same code is using twice in the same page(especially repeated id usage) which causes the conflict I think. Already referred similar posts 'How to have multiple Google Custom Search field on the same page' and 'Multiple GCSE's on page at one time', but those are not solutions for the situation which I'm facing. How to enable both search boxes in same page work in a similar manner without causing conflict?
I'm currently experimenting with this. Getting 2 cse's with a different cx on the same page isn't that hard, but can't get the suggestions working. The v2 control api method description isn't very clear.
But with a single cx you can just do this:
html:
<div id="first"></div>
<br/>
<div id="second"></div>
js:
var renderSearchElement = function() {
google.search.cse.element.render({
div: "first",
tag: 'search'
});
google.search.cse.element.render({
div: "second",
tag: 'search'
});
};
var myCallback = function() {
if (document.readyState == 'complete') {
renderSearchElement();
} else {
google.setOnLoadCallback(renderSearchElement, true);
}
};
window.__gcse = {
parsetags: 'explicit',
callback: myCallback
};
var loadElements = function() {
var cx = '*****************:**********';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
}
loadElements();
demo:
https://jsfiddle.net/501g48d4/
CSE v2 control API and render params: https://developers.google.com/custom-search/docs/element
Related
Wanted to achieve google custom search result like below
expected result (without any popup):
But i'm getting result something like below one
Observe the above result is not pre-populated and does not give resume tags like Indeed,LinkedIn
When i search for software developer resume then it will give me result like below one
Question: please help me to get pre-populated result like 1st image without any popup
Here is what i have tried:
(function() {
var cx = '005502706694827175734:jh1_mjmyukc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
<gcse:search linktarget="_parent" resultsUrl="https://cse.google.com/cse/home?cx=008650345519931166596:ni_z2d9ca00#gsc.tab=0&gsc.sort=&gsc.ref=more%3Alinkedin"></gcse:search>
// this url gives Indeed,LinkedIn related results https://cse.google.com/cse/home?cx=008650345519931166596:ni_z2d9ca00#gsc.tab=0&gsc.sort=&gsc.ref=more%3Alinkedin
Try using the "two page" layout as described on these pages:
https://support.google.com/customsearch/answer/2633315
https://developers.google.com/custom-search/docs/tutorial/implementingsearchbox
I have created a google custom search for my website as below but when i search 2-3 keywords it replaces the spaces with %20 and shows no results:
Result Page and Query
Search Box Code:
<script>
(function() {
var cx = '44444:orudazwgyxa';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
Search result code:
<script>
(function() {
var cx = '44444:orudazwgyxa';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only linktarget="_parent"></gcse:searchresults-only>
I don't want %20 in my query instead of spaces but i want to show the keywords as it is. And it should show the result for the searched keywords.
Thanks
It seems the solution to the bad results is taking the "www" out of our target URL for the results page.
Sounds goofy to me, but hey, it worked.
So, if anyone else is having the same problem, check your result page URL target and remove the www from it
So instead of: http://www.yourwebsite.com/search_results.html
use: http://yourwebsite.com/search_results.html
And, then it will work!
Setting up Google Custom Search: https://www.google.com/cse/
I would like to be able to use JS to call the search terms the users are keying.
<script>
(function () {
var cx = 'mygoogle-gcse-id';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();</script>
How do I use JS to call the elements entered into the search form?
I would want to call:
onblur="somefunction('gsce-input-data')";
The search elements are created on the fly when the code above loads the script. This means you need to attach your listeners using the "live" method, so that they get attached when the element actually enters the DOM:
$('.gsc-input').live('blur', function(e) { //do something });
Here is the fiddle example: http://jsfiddle.net/pASWm/1/
How to get url of image on image click with javascript or jQuery in Google Image Search API v2? I didn't find this information in Google Search API v2 documentation. Please, help me to solve this problem.
<script>
var renderSearchElement = function() {
google.search.cse.element.render(
{
gname:'gsearch',
div: "test",
attributes: {
disableWebSearch: true,
enableHistory: true,
enableImageSearch:true,
imageSearchResultSetSize:6
},
tag: 'search'
});
var element = google.search.cse.element.getElement('gsearch');
element.execute();
};
var myCallback = function() {
if (document.readyState == 'complete') {
renderSearchElement();
}
else {
google.setOnLoadCallback(renderSearchElement, true);
}
};
window.__gcse = {
parsetags: 'explicit',
callback: myCallback
};
(function() {
var cx = '000888210889775888983:tmhkkjoq81m';
var gcse = document.createElement('script');
gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
You probably want to have a listener on the image, so that when it is clicked it can report the url value. This means you need to overwrite the default cse image with your own version with listener attached.
The procedure (some code there is obsolete, but the general things work) for overwriting the default results template with your own is described here: https://developers.google.com/custom-search/docs/js/rendering
You only need to overwrite the thumbanail part, eg:
<div id="my_thumbnail">
<div data-attr="0" data-vars="{tn:(Vars.cseThumbnail && cseThumbnail.src)
? cseThumbnail : (
(Vars.thumbnail && thumbnail.src)
? thumbnail : {src:Vars.document && document.thumbnailUrl})}">
<div data-if="tn.src">
<a class="gs-image" data-attr="{href:url,target:target}" onclick="alert(this)">
<img data-if="!tn.width || !tn.height || tn.width >= tn.height * 7 / 5" class="gs-image"
data-attr="{src:tn.src}"
onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
this.parentNode.parentNode.parentNode.style.display = '';
this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-landscape';
}
"/>
<img data-elif="true" class="gs-image"
data-attr="{src:tn.src}"
onload="if (this.parentNode && this.parentNode.parentNode && this.parentNode.parentNode.parentNode) {
this.parentNode.parentNode.parentNode.style.display = '';
this.parentNode.parentNode.className = 'gs-image-box gs-web-image-box gs-web-image-box-portrait';
}
"/>
</a>
</div>
</div>
</div>
Please mind the onclick="alert(this)" part - that is the only difference I added compared with default cse template. You can change this onclick function to do something smarter with the url than just alerting it. Here's a full demo:
http://jsfiddle.net/dhkfZ/
I have a Google Custom Search (that will be a Site Search in the future) and I'd like to use the snippet that Google provides:
<script>
(function() {
var cx = '...';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
I need to restrict it to certain urls. When using the xml api, you can use the parameter as_sitesearch to specify this filter.. is there a way to do this with the code above?
with this I can now access the google.search.cse object before the search is loaded.. but I still don't know parameter:
<script>
var myCallback = function() {
if (document.readyState == 'complete') {
// Document is ready when CSE element is initialized.
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
} else {
// Document is not ready yet, when CSE element is initialized.
google.setOnLoadCallback(function() {
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
}, true);
}
};
// Insert it before the CSE code snippet so that cse.js can take the script
// parameters, like parsetags, callbacks.
window.__gcse = {
parsetags: 'explicit',
callback: myCallback
};
(function() {
var cx = '007407192365638902354:eyxoavi7oa0';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<style>
.gsc-control-cse * {
box-sizing:content-box;
}
</style>
Yes you can.
Use a hidden field inside your search form:
<input type="hidden" name="as_sitesearch" value="your_url_here/directory">
I've got the same question. The only way I have been able to restrict the search to a particular folder in Google Site Search version 2 is to hard-code it into the element:
<gcse:search as_sitesearch="www.mydomain.com/site1"></gcse:search>
It would be great if there was a way to add as_sitesearch via JavaScript, like with version 1.
To restrict to certain urls:
<gcse:searchbox-only as_sitesearch="mydomain.com" resultsUrl="http://mydomain.com/search-results/" enableAutoComplete="false"></gcse:searchbox-only>
Be sure to replace mydomain.com with the appropriate domain that you want to restrict to.