Busca com Auto-complete do Google Custom Search JSON API para sites estáticos
Tags: googlecustomsearch, cse, googlecse, customsearchjsonapi
Published: 2020-01-21 18:49:54

O código abaixo utiliza a API de Json do [Google Custom Search](http://cse.google.com.br/cse/) para permitir que sites estáticos tenham um recurso de busca. E o melhor, provido pelo melhor sistema de busca do mundo: o Google

Você pode ver o funcionamento da busca no site https://precoatualizado.com.br

Buscarei o termo "[preço da batedeira orbital](https://precoatualizado.com.br/preco-do-batedeira-orbital-semp-cherry-ba8017vm1-15-velocidades-600w-110v)"

![Preço da batedeira orbital](https://thepracticaldev.s3.amazonaws.com/i/fek8np6630kchthvfqls.png)


Segue código completo do exemplo.

<ul>
<li>1º Copie o código abaixo</li>
<li>2º Informe a variável <strong>"idCustomSearch"</strong> (pegue o ID aqui http://cse.google.com.br/cse/)</li>
<li>3º Informe a variável <strong>"chaveCustomSearch"</strong> (pegue o ID aqui https://developers.google.com/custom-search/v1/overview)</li>
</ul>


<pre>
var BuscaTopo = {
    idCustomSearch: "YOUR CUSTOM SEARCH ID",
    chaveCustomSearch: "YOUR CUSTOM SEARCH KEY",
    inputBusca: document.getElementById("termoBusca"),
    resultadosBusca: document.getElementById("resultadosBusca"),
    contBuscaTopo: 1,
    montaHtmlBusca: function(o) {
        for (var a = "", e = 0; e < o.items.length; e++) {
            var s = o.items[e],
                t = s.hasOwnProperty("pagemap") ? s.pagemap.metatags[0]["og:image"] : "",
                u = s.title;
                u = u.length > 95 ? u.substr(0, 95) + "..." : u, 
                a += "<div class='col c3'>",
                a += "<div class='item'>", "" != t ?  (a += "<p><a href='" + s.link + "'>' + u + "</a></p>") : a += "<p class='somenteTexto'><a href='" + s.link + "'>" + u + "</a></p>",
                a += "</div>",
                a += "</div>"
        }
        return a
    },
    init: function() {
        var o = null;
        BuscaTopo.inputBusca.addEventListener("keyup", function(a) {
            clearTimeout(o), o = setTimeout(function() {
                BuscaTopo.instantSearch()
            }, 500)
        })
    },
    erroBusca: function() {
        html = "<div class='result-empty'>Ocorreu um erro ao realizar sua busca. Por favor, tente novamente!</div>", BuscaTopo.resultadosBusca.innerHTML = html, BuscaTopo.resultadosBusca.style.display = "block"
    },
    buscar: function() {
        xmlhttp = new XMLHttpRequest, xmlhttp.open("GET", "https://www.googleapis.com/customsearch/v1?key=" + BuscaTopo.chaveCustomSearch + "&cx=" + BuscaTopo.idCustomSearch + "&q=" + termo + "&fields=kind,items(title,link,pagemap/metatags/og:image)", !0), xmlhttp.onerror = function() {
            BuscaTopo.erroBusca()
        }, xmlhttp.onreadystatechange = function() {
            if (4 == xmlhttp.readyState)
                if (200 == xmlhttp.status) {
                    var o = JSON.parse(xmlhttp.responseText);
                    BuscaTopo.resultadosBusca.innerHTML = "", o.hasOwnProperty("items") ? (html = "<div class='col c12'>", html += BuscaTopo.montaHtmlBusca(o), html += "</div>", BuscaTopo.resultadosBusca.innerHTML = html, BuscaTopo.resultadosBusca.style.display = "block") : (html = "<div class='result-empty'>Sua busca não retornou nenhum resultado!</div>", BuscaTopo.resultadosBusca.innerHTML = html, BuscaTopo.resultadosBusca.style.display = "none"), ga("send", "event", "Busca Topo", termo, BuscaTopo.contBuscaTopo), BuscaTopo.contBuscaTopo += 1
                } else BuscaTopo.erroBusca()
        }, xmlhttp.send(null)
    },
    instantSearch: function() {
        termo = BuscaTopo.inputBusca.value, input = BuscaTopo.inputBusca.focus(), "" == termo || null == termo ? (BuscaTopo.resultadosBusca.innerHTML = "", BuscaTopo.resultadosBusca.style.display = "none") : BuscaTopo.buscar()
    }
};
BuscaTopo.init();
</pre>