在 angularjs 中实现谷歌自定义搜索答案

【问题标题】：Implementing google custom search in angularjs在 angularjs 中实现谷歌自定义搜索
【发布时间】：2015-12-13 22:04:23
【问题描述】：

我正在尝试在 Angular js 网站中实现谷歌自定义搜索。当我单击搜索按钮时，它不会显示任何内容，但 url 会更新为 url。我已按照谷歌文档中提到的步骤进行操作。我不确定我做错了什么？

我的搜索栏位于主页上 -

<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#/searchresult" lr="lang_en" queryParameterName="search"></gcse:searchbox-only>

我的搜索结果有 -

<gcse:searchresults-only lr="lang_en"></gcse:searchresults-only>

非常感谢任何意见。

谢谢，

【问题讨论】：

标签： angularjs google-custom-search

【解决方案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 中完成。）
在 Angular.js 旁边使用 JQuery 从用户那里获取 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 中。

【讨论】：

你能分享你的 github 链接吗，@Deovandski ？
抱歉，我在 github.com/Deovandski 上没有此代码，因为它属于 ndsu.edu... 如果您找不到示例，则可以使用 ndsu.edu/search Chrome 开发工具。