ngAutoComplete con Google Suggest api

AngularJS tiene ngAutoComplete que funciona perfectamente con Google.

¿Cómo puedo hacer que funcione con Google Suggest API (las palabras key sugeridas al escribir en el cuadro de input de Búsqueda de Google)? ¿Hay algo fuera de la caja?

Si no, ¿cuál es la mejor manera de implementarlo? (si necesito mi propia interfaz API, ¿cómo debo hacer la connection)?

EDITADO

Google Suggest API devolverá XML para la siguiente llamada. Si deseo devolver JSON, debe pasarlo por mi server para traducirlo. También podría ser una opción si sugieres

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

Versión actualizada (Directiva personalizada ngGoogleSuggest)

haz clic en Plunker

La directiva funciona mucho mejor porque en keyup realiza una llamada http a la API de GoogleSuggest

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

Margen:

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

Nota: planeo hacer un repository de GitHub para ngGoogleSuggest después de que haya sido probado un poco más


Capturas de pantalla

enter image description here

Llamar a la API de búsqueda de Google

  • Punto final: 'http://suggestqueries.google.com/complete/search
  • para la respuesta JSON (no XML), agregue param &client=firefox
  • Uri Parámetro de búsqueda codificada
  • utilice el protocolo JSONP agregando ?callback=JSON_CALLBACK para evitar el ?callback=JSON_CALLBACK Access-Control-Allow-Origin

ejemplo $http llamada

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

Puede agregar esto a la URL remota –

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

Haga de ThisIsTheSearchString una var que cambie en el trazo de la tecla. Antes de colocar la url en ngAutoComplete, asegúrese de codificar la cadena – escape(ThisIsTheSearchString); Esto ayudará si hay espacios en blanco en la búsqueda.

Obtuve la URL yendo a google y viendo la pestaña de networking. Devolverá un file .txt que deberá leer. También necesitará una expresión regular para comstackr el file.