ngAutoComplete 与 Google Suggest api

Question

AngularJS 有 ngAutoComplete 与 Google 位置完美配合。

如何使其与 Google Suggest API（在 Google 搜索输入框中键入时建议的关键字）一起使用？有什么开箱即用的东西吗？

如果没有，实现它的最佳方法是什么？ （如果我需要自己的 API 接口 - 我应该如何建立连接）？

已编辑

Google Suggest API 将为以下调用返回 XML。如果我想返回 JSON，它需要通过我的服务器端传递来翻译它。如果您建议，它也可能是一种选择

http://google.com/complete/search?output=toolbar&q=theory&gl=in

Answer 1

您可以将其添加到远程 URL -

https://www.google.com/s?sclient=psy-ab&biw=1242&bih=395&q=ThisIsTheSearchString&oq=&gs_l=&pbx=1&bav=on.2,or.r_cp.&bvm=bv.93112503,d.cWc&fp=160df26a97fa030e&pf=p&sugexp=msedr&gs_rn=64&gs_ri=psy-ab&tok=_1hxlqgFnvRgVdHXR4t-nQ&cp=10&gs_id=51&xhr=t&es_nrs=true&tch=1&ech=37&psi=O5FTVZiMAfPisASwnYH4Cg.1431540027601.1

使 ThisIsTheSearchString 成为一个在击键时改变的变量。在将 url 放入 ngAutoComplete 之前，请确保对字符串进行编码 - escape(ThisIsTheSearchString); 如果搜索中有任何空格，这将有所帮助。

我通过转到google 并观看网络标签获得了 URL。它将返回一个您必须阅读的 .txt 文件。您还需要一个正则表达式来编译文件。

Answer 2

更新版本（自定义指令 ngGoogleSuggest）

click Plunker

指令执行得更好，因为在keyup 上执行http 调用GoogleSuggest API

    elem.bind('keyup', scope.search);

标记：

  <div data-ng-google-suggest ng-model="Search"></div>

注意：经过更多测试后，我计划为 ngGoogleSuggest 创建一个 GitHub 存储库

---

屏幕截图

调用 Google 搜索 API

• 端点：'http://suggestqueries.google.com/complete/search
• 对于 JSON 响应（不是 XML），添加参数 &client=firefox
• Uri 编码搜索参数
• 使用 JSONP 协议，通过添加 ?callback=JSON_CALLBACK 来避免 Access-Control-Allow-Origin 错误

示例$http 调用

    scope.search = function() {
      // If searchText empty, don't search
      if (scope.searchText == null || scope.searchText.length < 1)
        return;

      var url = 'http://suggestqueries.google.com/complete/search?';
      url += 'callback=JSON_CALLBACK&client=firefox&hl=en&q=' 
      url += encodeURIComponent(scope.searchText);
      $http.defaults.useXDomain = true;

      $http({
        url: url,
        method: 'JSONP',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT',
          'Content-Type': 'application/json',
          'Accept': 'application/json'

        }
      }).
      success(function(data, status, headers, config) {

        // Api returns [ Original Keyword, Searches[] ]
        var results = data[1];
        if (results.indexOf(scope.searchText) === -1) {
          data.unshift(scope.searchText);
        }
        scope.suggestions = results;
        scope.selectedIndex = -1;
      }).
      error(function(data, status, headers, config) {
        console.log('fail');
        // called asynchronously if an error occurs
        // or server returns response with an error status.
      });