Interfaz de programación de aplicaciones AJAX Search de Google puede ser utilizado como una alternativa a la búsqueda delas funciones incluidas en la mayoría de los blogs y sitios web. Para utilizar con eficacia Google AJAX, debe crear una clave de API que se genera por Google. Esta pieza única y prolongada de los usuarios otorga código de acceso a la API al tiempo que evita los delincuentes abusen de la interfaz. La API no se puede utilizar con eficacia hasta que el administrador del sitio web crea e incrusta la clave de API en la codificación de la búsqueda AJAX de API.
BUSQUEDA GOOGLE
Regístrese para la API de búsqueda AJAX clave. Vaya a la página de registro de código de Google (ver Recursos) y complete la información requerida. Debe tener una clave de API para cada sitio que va a utilizar Google AJAX en.
Escriba el siguiente código en el HTML de su sitio web:
- FORMULARIO DE BUSQUEDA -
acción form = método "http://www.google.com/search" = "GET"
- HTML5 BUSCAR CAJA! -
input type = "search" id = "search box" name = resultados "q" = marcador de posición "5" = "Buscar ..." autocomplete = "on" /
- BUSCAR example.name SOLAMENTE! -
input type = name "oculto" = valor "sitesearch" = "example.name" /
- BUSCAR BOTÓN -
Identificación entrada type = "search-enviar" = valor "enviar" = "Buscar" /
/ Forma
- Asíncrona CARGAR LA BÚSQUEDA API AJAX; MOOTOOLS TAMBIÉN! -
script type = "text / javascript" src = "http://www.google.com/jsapi?key = [key añadir aquí]" / script
script type = "text / javascript"
google.load ('mootools', '1 .2.4 ');
google.load ('search', '1 ');
/ Script
Reemplazar "[key add aquí]" con la clave de la API Google.
Escriba el siguiente código en el CSS de su página web:
/ * Resultados de posicionamiento * /
# Resultado de búsqueda {position: absolute; z-index: 90; top: 40px; derecha: 10px; visibility: hidden;}
/ * Triángulo! * /
# Búsqueda de Resultados de puntero {width: 0px; altura: 0px; border-left: 20px sólido transparente; border-right: 20px sólido transparente; border-bottom: 20px sólido # eee; margin-left: 80%;}
/ * Contenido de DIV que tiene de búsqueda resultados! * /
# Resultado de búsqueda de contenido {position: relative; padding: 20px; background: # fff; frontera: 3px sólido # eee, ancho: 380px; min-height: 200px;-webkit-box-shadow: 5px 5px 5px rgba (0 , 0, 0, 0,5)}
Escriba el siguiente código de JavaScript en la parte de "scripts" de su sitio web:
guión
window.addEvent ('domready', function () {
/ * Search * /
SearchBox = false, searchFn = function = $ ('search-box "), searchLoaded var () {
/ *
Estamos lazyloading todas las cosas de búsqueda.
Después de todo, ¿por qué crear elementos, añadir detectores, etc, si el usuario nunca llega?
* /
if (! searchLoaded) {
searchLoaded = true; / / establecer searchLoaded a "true", no más carga!
/ / Crear elementos!
var container = new Element ('div', {id: "resultado de búsqueda '}). inyectan ($ (' búsqueda de área"), "después");
var contenedor = new Element ('div', {
estilos: {
posición: "relativo"
}
.}) Inyectar (contenedor);
. nueva Element ('div', {id: "búsqueda-resultados-pointer '}) inyectar (envoltorio);
. contentContainer var = new Element ('div', {id: "de resultados de búsqueda de contenido '}) inyectar (envoltorio);
var más cerca = new Element ('a', {
href: 'javascript:;'
texto: "Cerrar",
estilos: {
posición: «absoluta», / / posición en el vínculo "Cerrar"
inferior: 35,
derecha: 20
},
eventos: {
click: function () {
container.fade (0);
}
}
.}) Inyectar (envoltorio);
/ Interacción / google
var search = new google.search.WebSearch (),
de control = new google.search.SearchControl (),
Opciones = new google.search.DrawOptions ();
/ / Set de google opciones
options.setDrawMode (google.search.SearchControl.DRAW_MODE_TABBED);
options.setInput (cuadro de búsqueda);
/ Opciones de búsqueda / set
search.setUserDefinedClassSuffix ('sitesearch');
search.setSiteRestriction ('davidwalsh.name');
search.setLinkTarget (google.search.Search.LINK_TARGET_SELF);
/ Controles de búsqueda / set
control.addSearcher (búsqueda);
control.draw (contentContainer, opciones);
control.setNoResultsString ('No se encontraron resultados.');
/ / Añadir detectores cuadro para buscar
searchBox.addEvents ({
keyup: function (e) {
if (searchBox.value x.value! = searchBox.get ('marcador')) {
container.fade (0.9);
control.execute (searchBox.value);
}
else {
container.fade (0);
}
}
});
searchBox.removeEvent ('focus', searchFn);
}
};
searchBox.addEvent ('focus', searchFn);
});
/ Script
También puede guardar lo siguiente en un archivo de texto por separado y llame remotamente el archivo con el siguiente "JS".:
script src type = "http://example.com/files/googleajax.js" = "text / javascript" charset = "utf-8" / script
Vaya a la ubicación en la que ha colocado el cuadro de búsqueda de Google AJAX. Ingrese un término de búsqueda para ver Google AJAX en acción.
No hay comentarios:
Publicar un comentario