在 angularjs 中实施 google 自定义搜索
Implementing google custom search in angularjs
我正在尝试在 angular js 网站中实施 google 自定义搜索。
当我单击搜索按钮时,它没有显示任何内容,但 url 更新为 url。
我已按照 google 文档中提到的步骤进行操作。
我不确定我做错了什么?
我的搜索栏位于主页上 -
<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#/searchresult" lr="lang_en" queryParameterName="search"></gcse:searchbox-only>
我的搜索结果有 -
<gcse:searchresults-only lr="lang_en"></gcse:searchresults-only>
非常感谢任何意见。
谢谢,
您可能同时遇到不止一个问题...
1。查询参数不匹配
您的 searchresults-only
与 gcse:searchbox-only
上指定的 queryParameterName
不匹配。
Index.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
Search.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
2。 Angular.js 正在阻止 Google CSE
的流量
在正常情况下,Google搜索元素会触发带有搜索参数的HTTP GET。但是,由于您处理的是单页应用程序,您可能看不到查询参数。如果您在定位 resultsUrl="#/searchresult"
时怀疑是真的,那么您有两个选择:
- 对 resultsUrl="http://YOURWEBSITE/searchresult" 强制执行 HTTP GET。您可能必须匹配路由,或者沿着这些线路进行某些操作才能捕获 REST 请求(Ember.js 确实很容易做到,但我还没有在 Angular.js 中完成。)
- 将 JQuery 与 Angular.js 一起使用以获取 Index.html 上用户的输入并手动触发 search.html 上的搜索。你会怎么做?对于 index.html 你会做类似下面的事情,对于结果你会像我在另一个 post.
中回答的那样实现
Index.html
<div>GSC SEARCH BUTTON HOOK: <strong><div id="search_button_hook">NOT ACTIVATED.</div></strong></div>
<div>GSC SEARCH TEXT: <strong><div id="search_text_hook"></div></strong></div>
<gcse:search ></gcse:search>
Index.js
//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
callback: googleCSELoaded
};
//When it renders, their initial customized function cseLoaded() is triggered which adds more hooks. I added comments to what each one does:
function googleCSELoaded() {
$(".gsc-search-button").click(function() {
$("#search_button_hook").text('HOOK ACTIVATED');
});
$("#gsc-i-id1").keydown(function(e) {
if (e.which == 13) {
$("#enter_keyboard_hook").text('HOOK ACTIVATED');
}
else{
$("#search_text_hook").text($("#gsc-i-id1").val());
}
});
}
(function() {
var cx = '001386805071419863133:cb1vfab8b4y';
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);
})();
我有一个 index.html 代码的 live version,但我不承诺将永久有效,因为它托管在我的 NDSU FTP.
我正在尝试在 angular js 网站中实施 google 自定义搜索。 当我单击搜索按钮时,它没有显示任何内容,但 url 更新为 url。 我已按照 google 文档中提到的步骤进行操作。 我不确定我做错了什么?
我的搜索栏位于主页上 -
<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#/searchresult" lr="lang_en" queryParameterName="search"></gcse:searchbox-only>
我的搜索结果有 -
<gcse:searchresults-only lr="lang_en"></gcse:searchresults-only>
非常感谢任何意见。
谢谢,
您可能同时遇到不止一个问题...
1。查询参数不匹配
您的 searchresults-only
与 gcse:searchbox-only
上指定的 queryParameterName
不匹配。
Index.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
Search.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
2。 Angular.js 正在阻止 Google CSE
的流量在正常情况下,Google搜索元素会触发带有搜索参数的HTTP GET。但是,由于您处理的是单页应用程序,您可能看不到查询参数。如果您在定位 resultsUrl="#/searchresult"
时怀疑是真的,那么您有两个选择:
- 对 resultsUrl="http://YOURWEBSITE/searchresult" 强制执行 HTTP GET。您可能必须匹配路由,或者沿着这些线路进行某些操作才能捕获 REST 请求(Ember.js 确实很容易做到,但我还没有在 Angular.js 中完成。)
- 将 JQuery 与 Angular.js 一起使用以获取 Index.html 上用户的输入并手动触发 search.html 上的搜索。你会怎么做?对于 index.html 你会做类似下面的事情,对于结果你会像我在另一个 post. 中回答的那样实现
Index.html
<div>GSC SEARCH BUTTON HOOK: <strong><div id="search_button_hook">NOT ACTIVATED.</div></strong></div>
<div>GSC SEARCH TEXT: <strong><div id="search_text_hook"></div></strong></div>
<gcse:search ></gcse:search>
Index.js
//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
callback: googleCSELoaded
};
//When it renders, their initial customized function cseLoaded() is triggered which adds more hooks. I added comments to what each one does:
function googleCSELoaded() {
$(".gsc-search-button").click(function() {
$("#search_button_hook").text('HOOK ACTIVATED');
});
$("#gsc-i-id1").keydown(function(e) {
if (e.which == 13) {
$("#enter_keyboard_hook").text('HOOK ACTIVATED');
}
else{
$("#search_text_hook").text($("#gsc-i-id1").val());
}
});
}
(function() {
var cx = '001386805071419863133:cb1vfab8b4y';
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);
})();
我有一个 index.html 代码的 live version,但我不承诺将永久有效,因为它托管在我的 NDSU FTP.