ngAutoComplete with Google 建议 api

Question

AngularJS 有 ngAutoComplete 与 Google 完美搭配。

如何使用 Google 建议 API（在 Google 搜索输入框输入时建议的关键字）？有开箱即用的东西吗？

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

已编辑

Google 建议API 将return XML 进行后续调用。如果我想 return 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。它将 return 一个您必须阅读的 .txt 文件。您还需要一个正则表达式来编译文件。

Answer 2

更新版本（自定义指令 ngGoogle建议）

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来避免访问控制-允许来源错误

示例$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.
      });

ngAutoComplete with Google 建议 api

ngAutoComplete with Google Suggest api

javascript

autocomplete

google-api

google-suggest

angularjs

更新版本（自定义指令 ngGoogle建议）

click Plunker