Los propietarios de sitios web a menudo deciden utilizar el motor de búsqueda personalizado de Google (GCSE) para buscar en su propio contenido en lugar de utilizar un buscador integrado a medida. La razón es simple, lleva mucho menos trabajo integrarlo y funciona a la perfección. Si no necesitas filtros avanzados o parámetros de búsqueda personalizados, creo que deberías echar un ojo al motor de búsqueda personalizado de Google.
En este artículo, te mostraré cómo mostrar manualmente el formulario de búsqueda (sin necesidad de utilizar una tag especial de GCSE) y una caja de resultados que otorgará un mayor control a la hora de personalizar tu propio buscador de Google en la página.
El problema
Por lo general, añadir el motor de búsqueda personalizado de Google en tu sitio es tan simple como copiar y pegar un script y una etiqueta HTML en el código de tu web. Donde coloques la etiqueta HTML, se mostrará el input de búsqueda, así de sencillo. Al iniciar una búsqueda desde este campo, se realizará una búsqueda en Google sobre el parámetro introducido por el usuario sobre las páginas indexadas por Google del mismo dominio.
Pero al introducir este campo en un sitio web, surge casi siempre una duda: "¿Cómo cambio el placeholder del motor de búsqueda de Google que acabo de integrar en la web?". Desafortunadamente, la primera respuesta que se te viene a la cabeza no sirve para nada, puesto que el motor utiliza un método setTimeout con el fin de esperar la llamada Ajax desde el GCSE para completarlo y después cambia sus atributos a través de JavaScript.
Lo que vamos a hacer es consultar el elemento y cambiar sus atributos con JS, pero en vez de hacerlo mediante un setTimeout(), vamos a utilizar el callback proporcionado por el GCSE que nos garantice que el input se ha cargado.
Creación de una cuenta de GCSE
El motor de búsqueda está configurado completamente online. El primer paso es ir al sitio de GCSE y hacer clic en añadir. Después completa el formulario con el dominio en el que deseas buscar (por lo general, debe ser la URL de tu sitio). Puedes saltarte la configuración avanzada por ahora.
Al hacer clic en Terminar, se te presentan tres opciones:
Obtener código, que te indicará qué y dónde tienes que copiar el código del buscador para mostrarlo en tu sitio
URL pública, que te mostrará una vista previa del buscador que vas a configurar
Panel de control, para personalizar la búsqueda
Vete a Panel de control y haz clic en Search Engine ID. Apúntate ese valor para posteriores acciones.
El HTML
Con el fin de probar esto, vamos a crear un index.html básico que contenga el código HTML necesario, y un archivo app.js que contenga las funciones necesarias para procesar y personalizar nuestra búsqueda.
Así que, crea un archivo HTML con este código en su interior:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>GCSE test</h1>
<div class="gcse-search-wrapper"></div>
<div class="gcse-results-wrapper"></div>
<script src="app.js"></script>
</body>
</html>Hemos añadido dos divs con clases especiales para que sean reconocidos como los elementos donde el formulario de búsqueda y los resultados se muestren.
Funciones para mostrarlo manualmente
Ahora ve a tu archivo app.js y añádele esto:
var config = {
gcseId: '006267341911716099344:r_iziouh0nw',
resultsUrl: 'http://localhost:8080',
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](form);
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
En primer lugar, vamos a declarar algunas variables para la configuración. Pon el ID que anotaste antes en el campo gcseId de la configuración. Pon la URL de tu archivo index.html local en el campo de resultsUrl. Aquí es donde se redirigirá la búsqueda cuando el usuario envíe una consulta.
addSearchForms
Esta función comprueba si la página se ha cargado y, si es así, llama a la función queryAndRender() o, si el documento aún no se ha cargado, a continuación, define un callback con el fin de volver aquí más tarde una vez el documento se haya cargado.
queryAndRender
Esta función consulta el DOM de los elementos con las clases establecidas en la configuración. Si se encuentra un div, llama renderSearch() y renderResults() para crear tanto el campo de búsqueda como los resultados, respectivamente.
renderSearch
Aquí es donde sucede la magia. Nosotros utilizamos la API de Google Search (más documentación sobre cómo utilizar el objeto google.search.cse.element aquí) para crear el cuadro de búsqueda, y si existe una consulta activa (resultados), la caja de resultados.
La función renderSearch tiene más argumentos de los que puedes ver en este ejemplo, así que asegúrate de comprobar la documentación si necesitas una mayor personalización. El argumento div coge el ID del div donde queremos que el buscador se muestre, y el argumento tag es para denotar lo que queremos mostrar exáctamente (resultados, formulario de busqueda o ambos).
Además, renderSearch() mira en los atributos del elemento div, y si hay un atributo de estilo dado, se busque ese estilo y lo aplica sobre el elemento. Esta es nuestra oportunidad perfecta para aplicar estilo al elemento.
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
Función para la personalización
Ya estamos listos para añadir la función de personalización al div de búsqueda. Volvemos al index.html y en el div #searchForm, añadimos un atributo styling-function.
<div styling-function="removePlaceholder"
id="searchForm" class="gcse-search-wrapper"></div>Ahora dentro de app.js, al principio del archivo, debajo de la declaración de variables de configuración, añadimos esta nueva función:
var removePlaceholder = function(div) {
var inputField = div.querySelector("input.gsc-input");
// Change the placeholder
inputField.placeholder = "Search SitePoint";
// Remove the background
inputField.style.background = "none";
// The background will get re-attached on blur, so add an event that will also remove it on blur
// Another way to do this would be to de-attach the element from the DOM and then re-attach again, hence wiping the listeners
inputField.addEventListener("blur", function() {
inputField.style.background = "none";
});
};
Fuente: sitepoint.com