admin管理员组文章数量:1384383
I'm trying to have multiple search field on the same page with Google Custom Search (GCS) like this :
<script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
<script>
(function() {
var cx = 'user_id:field_id2';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
Unfortunatly, It does not work. The search is made with the same cx for every field. When It do the ajax request on this address : ... there is this value : &cx=user_id:field_id1 and the value is the same for both fields.
What is the solution?
I already seen this question : Multiple Google CSE (Custom Search Engine) Boxes on Same Page, but it seems to be on another version.
I'm trying to have multiple search field on the same page with Google Custom Search (GCS) like this :
<script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google./cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
<script>
(function() {
var cx = 'user_id:field_id2';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google./cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
Unfortunatly, It does not work. The search is made with the same cx for every field. When It do the ajax request on this address : https://www.googleapis./customsearch/v1element... there is this value : &cx=user_id:field_id1 and the value is the same for both fields.
What is the solution?
I already seen this question : Multiple Google CSE (Custom Search Engine) Boxes on Same Page, but it seems to be on another version.
Share Improve this question edited May 23, 2017 at 12:16 CommunityBot 11 silver badge asked Mar 19, 2014 at 16:50 DouguiDougui 7,2408 gold badges54 silver badges88 bronze badges4 Answers
Reset to default 2This is a tested solution. Took me a while but I'm slow and I don't use CSS all the time.
Use the V1 code. When you select Get Code on the setup screen there is an option for the V1 code.
Put your search code in a div
div tag
searchcode
end div tag
Make your cse variables unique. That will be two places at the top of the code.
div id='cse'
and a little lower
customSearchControl.draw('cse', options);
For each search these should be the same but different than the other searches. I used cse0, cse1, cse2.
This will fix the searches so each search will work as specified but they will still share the same CSS.
So scope your styles with the scoped attribute.
style type='text/css' scoped
Do this for each search code. Now your searches can have their own look and feel, color, etc.
http://deltaboogie./search
Thanks, Hairy Larry
Try using iFrames:
index.html
<html>
<head>
<title></title>
<style type="text/css">
/* Layout Style */
</style>
</head>
<body>
<iframe src="gcse1.html"></iframe>
<iframe src="gcse2.html"></iframe>
</body>
</html>
gcse1.html
<html>
<head>
<title></title>
</head>
<body>
<script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google./cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</body>
</html>
gcse2.html
<html>
<head>
<title></title>
</head>
<body>
<script>
(function() {
var cx = 'user_id:field_id2';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google./cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</body>
</html>
Perhaps your approach could be improved. You are declaring var cx twice on the same page. The second replaces the first.
Rather than 2 searches, have one with radio options to select 1 or 2 resetting the value of cx
<script>
(function() {
var cx = 'user_id:field_id1';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google./cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
// This basically takes the value of the radio button (requires jQuery)
$("input:radio[name='GCSField']").change(function() {
cx = $(this).val();
});
})();
</script>
<label for="user1">
<input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label>
<label for="user2">
<input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label>
<gcse:search></gcse:search>
Otherwise just create a new variable instead of reusing and gcse
<script>
(function() {
var cx1 = 'user_id:field_id1';
var gcse1 = document.createElement('script');
gcse1.type = 'text/javascript';
gcse1.async = true;
gcse1.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google./cse/cse.js?cx=' + cx1;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse1, s);
})();
</script>
<gcse:search></gcse:search>
<script>
(function() {
var cx2 = 'user_id:field_id2';
var gcse2 = document.createElement('script');
gcse2.type = 'text/javascript';
gcse2.async = true;
gcse2.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google./cse/cse.js?cx=' + cx2;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse2, s);
})();
</script>
<gcse2:search></gcse2:search>
Here's a non-iframe approach using CSE refinements: http://codepen.io/mikedaul/pen/xqxYOO?q=flowers
basic idea:
<script>
(function() {
var cx = 'your-cse-id-here';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google./cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only defaultToRefinement="refinement-tag-1"></gcse:searchresults-only>
<gcse:searchresults-only defaultToRefinement="refinement-tag-2"></gcse:searchresults-only>
I included a longer explanation here, fwiw.
本文标签： javascriptHow to have multiple Google Custom Search field on the same pageStack Overflow
版权声明：本文标题：javascript - How to have multiple Google Custom Search field on the same page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744455550a2606972.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论