I studied the Google Ajax Search API and made a sample for the blog.

The effect is relatively simple, and there are no artist cells :(
A lot of code is copied directly from Google's sample. I just added a simple PopUp mechanism.
The code is quite simple, so no comments are needed.

All code:

CSS:

<Style type = "text/css">
# Searcher {width: 200px ;}
# Searchresultdialog. show {display: block; background-color: white; width: 400px; border: solid 1px # eee; position: absolute; padding: 0 ;}
# Searchresultdialog. hide {display: none ;}
# Searchresult. header {font-size: larger ;}
# Hideresult, # moreresults {text-align: right; margin-top: 0; padding: 5px 20px; background: # eee ;}
# Searchresult li {border-bottom: solid 1px # eee ;}
</Style>

JavaScript:

<! -- Note: the following key should be everyone/website/virtual directory are different, need to apply from Google. the application process is completely free, should be success rate. Application address: http://code.google.com/apis/ajaxsearch/signup.html -->
<Script src = "http://www.google.com/jsapi? Key = plain "type =" text/javascript "> </script>
<Script language = "Javascript" type = "text/javascript">
// <! [CDATA [

Google. load ("search", "1 ");

Function PopupGoogleSearch ()
{
Var searchControl = new google. search. SearchControl ();

This. searcher = new google. search. WebSearch ();
SearchControl. addSearcher (this. searcher );
This. searcher. setResultSetSize (google. search. Search. SMALL_RESULTSET );
This. searcher. setSiteRestriction ("deerchao.cnblogs.com ");
This. searcher. setNoHtmlGeneration ();
This. searcher. setSearchCompleteCallback (this, PopupGoogleSearch. prototype. searchComplete, [this. searcher]);

This. searchForm = new google. search. SearchForm (true, document. getElementById ("searchform "));
This. searchForm. setOnSubmitCallback (this, PopupGoogleSearch. prototype. onSubmit );
This. searchForm. setOnClearCallback (this, PopupGoogleSearch. prototype. onClear );

This. resultPanel = document. getElementById ("searchresult ");
This. moreResults = document. getElementById ("moreresults ");
}

PopupGoogleSearch. prototype. searchComplete = function (searcher)
{
This. onClear ();
If (searcher. results & searcher. results. length> 0)
{
Var ul = document. createElement ("ul ");
For (var I = 0; I <searcher. results. length; I ++)
{
Var result = searcher. results [I];
Var li = document. createElement ("li ");
Var a = document. createElement ("");
A. innerHTML = "<p class = 'header'> <a href = '" + result. url + "'>" + result. title + "</a> </p> ";
Li. appendChild ();
Var p = document. createElement ("div ");
P. innerHTML = result. content;
Li. appendChild (p );
Ul. appendChild (li );
}
This. resultPanel. appendChild (ul );
This. showPanel ();
}
};

PopupGoogleSearch. prototype. onSubmit = function (form)
{
If (form. input. value)
{
This.searcher.exe cute (form. input. value );
This. moreResults. innerHTML = "<a href = 'HTTP: // www.google.com/search? Q = "+ form. input. value +" '> more results </a> ";
}
Return false;
};

PopupGoogleSearch. prototype. onClear = function ()
{
This. resultPanel. innerHTML = "";
This. hidePanel ();
};

PopupGoogleSearch. prototype. showPanel = function ()
{
Document. getElementById ("searchresultdialog"). className = "show ";
}

PopupGoogleSearch. prototype. hidePanel = function ()
{
Document. getElementById ("searchresultdialog"). className = "hide ";
}

Function createDiv (html, class)
{
Var el = document. createElement ("div ");
If (html ){
El. innerHTML = html;
}
If (class) {el. className = class ;}
Return el;
}

Function OnLoad ()
{
New PopupGoogleSearch ();
}
Google. setOnLoadCallback (OnLoad );

//]>
</Script>

HTML:

<Form id = "searcher">
<Div id = "searchform"> Loading </div>
</Form>
<Div id = "searchresultdialog" class = "hide">
<P id = "hideresult"> <a href = "#" onclick = "document. getElementById ('searchresultdialog '). className = 'hide '; "> disable </a> </p>
<Div id = "searchresult"> </div>
<P id = "moreresults"> </p>
</Div>