4

AngularJS 的ngAutoComplete可以完美地与 Google place 配合使用。

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

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

已编辑

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

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

4

2 回答 2

4

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

https://www.google.com/s?sclient=psy-ab&biw=1242&bih=395&q=这是搜索字符串&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成为在击键时更改的 var。在将 url 放入 ngAutoComplete 之前，请确保对字符串进行编码 -escape(ThisIsTheSearchString);如果搜索中有任何空格，这将有所帮助。

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

于 2015-05-13T18:26:48.110 回答
3

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

点击 Plunker

指令执行得更好，因为 onkeyup执行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.
      });
于 2015-05-13T21:33:14.977 回答