Google AJAX 搜索 API实现代码

Google AJAX 搜索 API
文档：http://code.google.com/intl/zh-CN/apis/websearch/docs/

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Google AJAX 搜索 API</title>
<style type="text/css">
#searchcontrol .gsc-control
{
width: 100%;
}
#searchcontrol .gsc-result-cnblogs .gs-title
{
color:Red;
}
</style>
<script src="https://www.google.com/jsapi?key=ABQIAAAAWUT8aaIj9mtqQa087LjVOhTPB5B7LRDljl2Cr4-
JwBNft1mFrRRmR1RoYEUCZCj0dtS2gIc8Al4-VA"
type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
google.load("search", "1");

function OnLoad() {
//搜索设置
var options = new google.search.SearcherOptions();
//当搜索结果为空时显示内容
options.setNoResultsString('查询结果为空！');

//搜索控件实例化
var searchControl = new google.search.SearchControl();
//每次显示8个搜索结果（取值范围：1-8）
searchControl.setResultSetSize(8);

//网页搜索
var siteCnblogs = new google.search.WebSearch();
//标头
siteCnblogs.setUserDefinedLabel("我们");
//样式后缀名
siteCnblogs.setUserDefinedClassSuffix("jb51");
//站点限制
siteCnblogs.setSiteRestriction("jb51.net");
searchControl.addSearcher(siteCnblogs, options);

//局部搜索
var siteZjfree = new google.search.WebSearch();
siteZjfree.setUserDefinedLabel("素材搜索");
siteZjfree.setSiteRestriction("sc.jb51.net");
searchControl.addSearcher(siteZjfree, options);

//全网搜索
searchControl.addSearcher(new google.search.WebSearch(), options);

//添加博客搜索
searchControl.addSearcher(new google.search.BlogSearch(), options);

//添加视频搜索
searchControl.addSearcher(new google.search.VideoSearch(), options);

//添加新闻搜索
searchControl.addSearcher(new google.search.NewsSearch(), options);

//添加图片搜索
searchControl.addSearcher(new google.search.ImageSearch(), options);

//添加本地地图搜索
var localSearch = new google.search.LocalSearch();
//地图中心标记 测试时可使用“大雁塔”
localSearch.setCenterPoint("西安,钟楼");
searchControl.addSearcher(localSearch, options);

//绘制搜索
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);

//执行搜索查询
searchControl.execute("google api");
}

//框架加载完成后调用
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
<div id="searchcontrol">
加载中...
</div>
</body>
</html>

赞 (0)

相关推荐

  • asp.net和ajax实现智能搜索功能代码

    asp.net和ajax实现智能搜索功能代码

    第一步,先做好搜索页面 复制代码 代码如下: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

  • jquery创建一个ajax关键词数据搜索实现思路

    jquery创建一个ajax关键词数据搜索实现思路

    在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jQuery,MySQL 和 Ajax创建简单和有吸引力的 Ajax 搜索,这是继<使用jQuery打造一个实用的数据传输模态弹出窗体>第二篇jquery项目实际运用的教程,希望大家在开发项目的时候能够根据自己的实际情况灵活运用 点击搜索默认显示所有的结果 输入A之后显示的搜索结果 输入 p之后显示的

  • 如何让搜索引擎抓取AJAX内容解决方案

    如何让搜索引擎抓取AJAX内容解决方案

    越来越多的网站,开始采用"单页面结构"(Single-page application). 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内容. 这种做法的好处是用户体验好.节省流量,缺点是AJAX内容无法被搜索引擎抓取.举例来说,你有一个网站. http://example.com 用户通过井号结构的URL,看到不同的内容. http://example.com#1 http://example.com#2 http://example.com#3 但是,搜索引擎

  • 基于ajax的简单搜索实现方法

    本文实例讲述了基于ajax的简单搜索实现方法.分享给大家供大家参考,具体如下: 这里使用两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据,后一个用来对搜索关键字进行处理.js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分.不错,code is cheap.看代码: testJs.js // 此函数等价于document.getElementById /document.all function $(

  • ASP.NET搭配Ajax实现搜索提示功能

    ASP.NET搭配Ajax实现搜索提示功能

    平时的软件开发中,信息的搜索是经常碰到的,增加搜索关键字提示是提高用户体验的一种很好的办法.今天就介绍下在ASP.NET如何利用AJAX来实现搜索的信息提示! 1.需要了解的一些知识点 (1)AJAX对象不同浏览器的创建 不同的浏览器对AJAX(XMLHttpRequest)对象的实现是不一样的,例如IE浏览器是通过ActiveX控件来实现AJAX对象.而其他一些浏览器比如火狐,它将AJAX对象实现成了一个浏览器内部的对象叫XMLHttpRequest,所以不同的浏览器创建AJAX对象的方式也就

  • php+ajax实时输入自动搜索匹配的方法

    本文实例讲述了php+ajax实输入自动搜索匹配的方法分享给大家供大家参考.具体分析如下: 第一种方法利用了jquery autocomplete,第二种使用了jquery ajax,其实两个都差不多. 最简单的办法我们就是直接使用jquery autocomplete方法了,如下在实例. html中,代码如下: 复制代码 代码如下: <script src="/js/v2/jquery.input_complete.js" type="text/javascript&

  • ThinkPHP实现ajax仿官网搜索功能实例

    本文实例讲述了ThinkPHP实现ajax仿官网搜索功能的方法.分享给大家供大家参考. 具体实现方法如下: 后台代码: 复制代码 代码如下: //搜索,如果在1不在0  function search(){      $keyword = $_POST['search'];      $Goods=M('goods');    //这里我做的一个模糊查询到名字或者对应的id,主要目的因为我这个系统是    //商城系统里面用到直接看产品ID      $map['goods_id|goods_n

  • php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $

  • asp+ajax仿google搜索提示效果代码

    对于更完整的代码可以参考,这个是支持数据库的版本.经过我们编辑测试.Asp+Ajax仿google搜索提示效果 数据库版需要修改的地方有 复制代码 代码如下: javascript.js var url="ajax.asp"; //后台地址 var time_delayajax=300; //搜索延迟 var time_delayupdown=100; //方向键延迟 obj_div.style.top = (xtop + 20) + "px"; //20差不多是输

  • Google AJAX 搜索 API实现代码

    Google AJAX 搜索 API文档:http://code.google.com/intl/zh-CN/apis/websearch/docs/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Google AJAX 搜索 API</title> <style type="text/css"> #searchcontrol .gsc-control { widt

  • Google 静态地图API实现代码

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Google 静态地图 API</title> <style type="text/css"> #divStaticMap span { color:Gray; font-size:12px; } #divStaticMap .sel { width:130px; } </style> <script

  • 用PHP获取Google AJAX Search API 数据的代码

    http://code.google.com/apis/ajaxsearch/documentation/#fonje 复制代码 代码如下: // This example request includes an optional API key which you will need to // remove or replace with your own key. // Read more about why it's useful to have an API key. // The r

  • Google (Local) Search API的简单使用介绍

    花了两天的时间来用Google的API来做这么一个小东西,其实真正的实现代码不是很多,十几行而已.费时间的工作是了解各个API的功能以及调试JavaScript. 下面简单介绍一下这次我用到的几个函数吧. •构造函数google.search.LocalSearch() 这其实是创建了一个LocalSearch的Service,这个Service和其他Service(News, Blog, Web)一样,是供SearchControl使用的.这些Service决定了SearchControl的能

  • Ajax引擎 ajax请求步骤详细代码

    Ajax引擎 ajax请求步骤详细代码

    说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? AJAX引擎其实是一个JavaScript对象,全写是 window.XMLHttpRequest对象,由于浏览器的版本不同,特别是老版本的IE浏览器,虽然也支持AJAX引擎,但是写法上有区别,在IE低版本中通常用 ActiveXObject对象来创建AJAX引擎. AJAX 来自英文"Asynch

  • Vue实现Google第三方登录的示例代码

    Vue实现Google第三方登录的示例代码

    目录 一.开发者平台配置 解决问题BUG 一.开发者平台配置 1.进入开发者平台,首先前往Google API 控制台选择或者创建一个项目 谷歌开发者平台 一堆眼花缭乱的API让你无从选择,但是你只要记住这次进来的目的是:社交API 2.使用这个API之前还需要做一件事,那就是申请一个OAuth 2.0 客户端 ID 3按照要求填写你项目的类型.名称以及来源url 注:创建完成之后,页面也有一个弹窗将你申请的客户端ID已经密钥展示出来,没错这个就是一个生成的过程. 4.安装vue-google-

  • JavaScript切换搜索引擎的导航网页搜索框实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> #search ul { list-style-type: none; display: block; width: 100px; height

  • Ajax 传递JSON实例代码

    Ajax 传递JSON实例代码

    前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递 前端页面 <!-- 前端页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

  • 分享Ajax创建简单实例代码

    XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面.几乎所有的浏览器都支持XMLHttpRequest对象,它是Ajax应用的核心技术. js代码如下: <html> <head> <title> New Document </title> <meta charset="utf

  • 借用Google的Javascript API Loader来加速你的网站

    如果你的网站用到了一些主流的Ajax library比如JQuery或者Prototype的话,你可以直接用Google Javascript API loader来加载你的ajax library. 具体的方法如下面的例子: <script src="http://www.google.com/jsapi" language="javascript"></script> <script language="javascrip

随机推荐