2011-11-22 19 views
7

Estamos utilizando la API de búsqueda personalizada de Google (API paga del lado del servidor) para potenciar nuestros resultados de búsqueda.Google Custom Search API ¿Autocompletar?

Me gustaría añadir una función de autocompletado de la búsqueda - Sin embargo, ¿alguien sabe si hay apoyo para esto (? Ya sea a través de la API del servidor, o por medio de algún tipo de lado del cliente JSONP)

He intentado utilizar el autocompletado para la búsqueda personalizada de Google, pero parece que esto quiere dibujar el cuadro de búsqueda y mostrar los anuncios de google con los resultados, que no quiero.

Respuesta

13

conseguimos esto algo de trabajo como este - espero que esto ayude a alguien más :)

$(function() { 
    $('input.search') 
    .focus(function() { this.select(); }) 
    .mouseup(function (e) { e.preventDefault(); }) 
    .autocomplete({ 
     position: { 
     my: "left top", 
     at: "left bottom", 
     offset: "0, 5", 
     collision: "none" 
     }, 
     source: function (request, response) { 
     $.ajax({ 
      url: "http://clients1.google.com/complete/search?q=" + request.term + "&hl=en&client=partner&source=gcsc&partnerid={GOOGLESEARCHID}&ds=cse&nocache=" + Math.random().toString(), 
      dataType: "jsonp", 
      success: function (data) { 
      response($.map(data[1], function (item) { 
       return { 
       label: item[0], 
       value: item[0] 
       }; 
      })); 
      } 
     }); 
     }, 
     autoFill: true, 
     minChars: 0, 
     select: function (event, ui) { 
     $(this).closest('input').val(ui.item.value); 
     $(this).closest('form').trigger('submit'); 
     } 
    }); 
}); 
+0

Gracias por este código, estoy teniendo un problema que no entiendo. Veo que la solicitud de red sale correctamente y veo una respuesta de 200 con los datos de respuesta esperados, pero por alguna razón esa función de éxito nunca se está ejecutando. ¿Algunas ideas? – Paul

+0

Impresionante, funcionó para mí. Paul, si no está viendo ninguna sugerencia, es posible que Google simplemente no tenga ninguna para usted. Me quedé realmente sorprendido por la cantidad de sugerencias que mi búsqueda de sitios personalizados tenía para ofrecer; Terminé agregando una cantidad enorme manualmente en el panel de control de CSE. – jfsaliba

+0

Genial, gracias por esto me funciona también. Mi único problema es el tramo '.ui-helper-hidden-accessible' que ahora aparece justo antes de la etiqueta de cierre del cuerpo. ¿Es esto algo que se puede desactivar, más bien que usar CSS para ocultarlo? – onebitrocket

1

En el momento de escribir (junio de 2013), hay una manera un poco más fácil de conseguir la terminación automática sin dejar de obtener los resultados como XML:

<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#"></gcse:searchbox-only>

  • El "truco" es que se puede especificar "resultsUrl", que significa que se puede dirigir a los resultados de búsqueda reales a una página se genera a través de la API XML, sin tener que implementar la búsqueda caja UX usted mismo.
Cuestiones relacionadas