Mar 13, 2007
Google AJAX Search 使用简介
无意中发现了Google提供了AJAX Search功能，可以适用于各大Blog（包括wordpress，blogspot，自制网页,等等），随即用Google大神搜索了一下。结果我发现网上有不少相关的文章，但是适合我的一个都没有，于是我自己动手把这个功能加到blog中，具体效果请试用左侧的搜索栏。本着共享的原则，将方法写在这儿，给大家一个 参考。
Google AJAX Search的功能非常强大，可以搜索网页、地图、新闻、书籍等等。但是我觉得对一个blog搜索来说，只要有本站搜索和网页搜索两项就足够了；另外，现在的blog多会采用两栏或者三栏的布局方式，因此，我也选择了将搜索栏和搜索结果分开显示的方法，合理的利用空间，如果你希望添加更多的内容，请参见Google AJAX Search documentation。
首先你要做的是去Google的网站申请一个Google AJAX Search API，点击左下角的确认框，并且输入你的blog地址后，你会得到一个长长的Key。
随后，在需要添加AJAX搜索功能的网页之header部分（在<head>和</head>之间），嵌入如下的代码（如果你使用的是wordpress，请在header.php中的</head>之前添加）：
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=请在此处填写你的key" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[
function OnLoad() {
// create a search control
var searchControl = new GSearchControl();
searchControl.setLinkTarget(GSearch.LINK_TARGET_SELF); //可选项，如果删除此行，搜索结果将在新页中打开
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET); //可选项，如果删除此行，搜索结果将从10条变为4条
// create a draw options object so that we
// can position the search form root
var options = new GdrawOptions();
options.setSearchFormRoot(document.getElementById("searchForm"));
options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
var siteSearch = new GwebSearch();
siteSearch.setUserDefinedLabel("填入你的网站标签");
siteSearch.setUserDefinedClassSuffix("siteSearch");
siteSearch.setSiteRestriction("填入你的blog网址");
searchControl.addSearcher(siteSearch);
// standard, unrestricted web search
searchControl.addSearcher(new GwebSearch());
searchControl.draw(document.getElementById("searchResults"), options);
}
GSearch.setOnLoadCallback(OnLoad);
//]]>
</script>
几个地方需要修改的我已经在代码中列明。
然后在你需要放置搜索结果的地方（一般放置在代码<body>之后，显示blog内容的部分）嵌入如下代码，（如果你使用wordpress，请在header.php中的代码<div id="content">之后添加）：
<div id="searchResults"/></div>
现在，你需要添加的是搜索条部分，一般说来，我们会选择在侧栏添加如下代码（如果你使用wordpress，请在siderbar.php中添加）：
<div id="searchform"></div>
好，现在你要做的是最后一件事情，将如下的代码嵌入到你的css文件中（wp用户的css文件为相应theme下的style.css），如果你的 网站没有css文件，那么请在<head>和</head>添加如下代码，注意，你可能要根据自己网站的实际情况修改下列代码：
/** Copyright 2005 Google Inc. All rights reserved. */
/* the GSearchControl CSS Classes
* .gsc-control :主显示框
*/
.gsc-control {
width: 98%;
}
.gsc-control div {
position: static;
}
/* control inputs
* .gsc-search-box : 搜索栏大小
* .gsc-input : the text input area
* .gsc-keeper : the save link below savable results
*/
form.gsc-search-box {
width: 96%;
}
/*
* This table contains the input element as well as the search button
* Note that the search button column is fixed width, designed to hold the
* button div's background image
*/
table.gsc-search-box {
width : 100%;
margin-bottom : 2px;
margin-top : 5px;
margin-left: -6px;
}
td.gsc-search-button {
width : 1%;
}
td.gsc-clear-button {
width : 14px;
}
/**
* undo common generic table rules
* that tend to impact branding
*/
table.gsc-branding td,
table.gsc-branding {
margin: 0 0 0 0;
padding: 0 0 0 0;
border : none;
}
table.gsc-branding {
border-style : none;
border-width : 0px;
border-spacing : 0px 0px;
width : 100%;
}
td.gsc-branding-text {
vertical-align : top;
}
td.gsc-branding-text div.gsc-branding-text {
padding-bottom : 2px;
text-align : right;
color : #676767;
font-size : 11px;
margin-right : 2px;
}
td.gsc-branding-img-noclear {
width : 51px;
vertical-align : bottom;
}
td.gsc-branding-img {
width : 60px;
vertical-align : bottom;
}
input.gsc-search-button {
margin-left : 4px;
}
div.gsc-clear-button {
display : inline;
text-align : right;
margin-left : 4px;
margin-right : 4px;
padding-left : 10px;
background-repeat: no-repeat;
background-position: center center;
background-image: url('http://www.google.com/uds/css/clear.gif');
cursor : pointer;
}
/*
* Given that this is sitting in a variable width tabel cell, the idea is
* for it to consume the entire cell. The adjacent cell contains the search
* button and that is a fixed width cell.
*/
input.gsc-input {
padding-left : 2px;
border-style : solid;
border-width : 1px;
border-color : #BCCDF0;
width : 99%;
}
/* tabbed mode of search control
* .gsc-tabsArea : the box containing all of the tabs
* .gsc-tabsAreaInvisible : same as above, but this is the state when search has been cleared
* .gsc-tabHeader : an individual tab
* .gsc-tabHeader.gsc-tabhActive : the active tab
* .gsc-tabHeader.gsc-tabhInactive : an inactive tab
* .gsc-tabData : the data area/box containg results and header data for each tab
* .gsc-tabData.gsc-tabdActive : the data area for the active tab
* .gsc-tabData.gsc-tabdInactive : the data area for inactive tabs
*/
.gsc-tabsArea {
clear: both;
margin-top: 6px;
}
.gsc-tabsAreaInvisible {
display : none;
}
.gsc-tabHeader {
display: inline;
cursor: pointer;
display: inline;
padding: 2px 10px !important;
border: 1px solid #999; /*可修改搜索结果标题栏的边框颜色*/
border-bottom: none;
margin-bottom: 0;
margin-right: -6px; /*不要修改*/
margin-left: 10px; /*不要修改*/
}
.gsc-tabHeader.gsc-tabhActive {
background: #484848; /*正在显示的搜索结果标题栏的背景*/
color: #FFFF99; /*正在显示的搜索结果标题栏的字体颜色*/
}
.gsc-tabHeader.gsc-tabhInactive {
}
.gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
}
/*此代码只对IE6适用*/
* html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}
/*此代码只对IE7适用*/
*+ html .gsc-tabData.gsc-tabdActive {
display: block;
border: 1px solid #999; /*搜索结果显示栏的边框颜色*/
padding:10px;
background: #484848; /*搜索结果显示栏的背景颜色*/
margin-bottom:10px; /*搜索结果显示栏内文字字体*/
font-size:14px;
margin-top:1px; /*不要更改，保证tab显示效果和firefox一致*/
}
.gsc-tabData.gsc-tabdInactive {
display: none;
}
/* tab specific results header supression
* - no twiddle, tabbed mode runs in full expand mode
* - no title
* - no stats
*/
.gsc-tabData .gsc-resultsHeader .gsc-title {
display: none;
}
.gsc-tabData .gsc-resultsHeader .gsc-stats {
display: none;
}
.gsc-tabData .gsc-resultsHeader .gsc-results-selector {
display : none;
}
/* the results for each section
* .gsc-resultsbox-{visible,invisible} : a complete-collection of results including headers
* .gsc-results : the collection of results for a given searcher
* .gsc-result : a generic result within the control. each result has this class, as well as .gsc-xxxResult where xxx is web, image, local, blog, etc.
*/
.gsc-resultsbox-visible {
display : block;
}
.gsc-resultsbox-invisible {
display : none;
}
.gsc-results {
clear: both;
padding-bottom: 2px;
}
.gsc-result {
margin-bottom: 10px;
}
.gsc-result .gs-title {
height: 1.4em;
overflow: hidden;
}
/* specialized, result type specific, fine grained controls */
.gsc-result div.gs-watermark {
display: none;
}
/* Ads
*/
.gsc-results .gsc-result img.gs-ad-marker {
display: none;
}
/*** End of Control, Begin Results ***/
/* generic, cross cutting result style
* - in the form of .gs-result .gs-xxx where xxx is the generic style
* .gs-title : typically the first line of a result, typically a link, image results over ride this, since for image results, the image is the link
* .gs-divider : typically seperates results from ads
* .gs-visibleUrl : typically the last line of a result, displayed in green. sometimes a link (like in blog search)
* .gs-clusterUrl : for news, and other similar services, this is a cluster of additional results
* img.gs-image : an actial image in a result
* .gs-phone : a phone number
* .gs-address : an address (includes street, city, region, country)
* .gs-streetAddress : a street (including #)
* .gs-city : a city
* .gs-region : a region (zip code, area, etc.)
* .gs-country : a country
* .gs-snippet : snippetized content
* .gs-watermark : indicator that user selected this result
* .gs-metadata : generic metadata, e.g.,
* .gs-image-box : generic container for a result's image (within a table)
* .gs-text-box : generic container for a result's text content (within a table). Note that this class, and image-box are only used in video
*/
.gs-result .gs-title,
.gs-result .gs-title * {
color: #6FF; /*搜索结果内容标题栏颜色 */
text-decoration: underline;
padding-bottom:5px;
}
.gs-divider {
padding-bottom: 8px;
text-align: center;
color: #676767;
}
.gs-result a.gs-visibleUrl,
.gs-result .gs-visibleUrl {
color: #FAC; /*搜索结果来源网站的颜色 */
text-decoration: none;
}
.gs-webResult div.gs-visibleUrl-long {
width : 100%;
overflow : hidden;
display : none;
}
可能需要修改的地方，我已经用汉字注解标注。
好了，在完成上述工作以后，将你所修改好的文件上传，就大功告成了。现在，别人如果要搜索你的网页，可以非常快速的用Google在你的网页上立即完成，一个字－酷！
