在 angularjs 中实施 google 自定义搜索

Question

我正在尝试在 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>

非常感谢任何意见。

谢谢，

Answer 1

您可能同时遇到不止一个问题...

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.

在 angularjs 中实施 google 自定义搜索

Implementing google custom search in angularjs

angularjs

google-custom-search