效果比较简陋,没有美工的细胞:(
很多代码都是直接从Google的
sample里抄的,我做的工作只是添加了简单的PopUp机制.
代码相当简单,就不用注释了.
全部代码:
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:
<!--注意:下面的这个key应该是每个人/网站/虚拟目录都不同的, 需要从Google申请. 申请过程完全免费, 应该是百分百成功率. 申请地址: http://code.google.com/apis/ajaxsearch/signup.html -->
<script src="http://www.google.com/jsapi?key=ABQIAAAAnbDm87eis9d6TnBZLuDj_BT3fZxwUXmDsFtw544tTyLwi1xKvRQWzjl_UJiFlgsvxapvgIGau2FakA" 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");
a.innerHTML = "<p class='header'><a href ='" + result.url + "'>" +result.title +"</a></p>";
li.appendChild(a);
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.execute(form.input.value);
this.moreResults.innerHTML = "<a href='http://www.google.com/search?q=" + form.input.value +"'>更多结果</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="#" οnclick="document.getElementById('searchresultdialog').className = 'hide';">关闭</a></p>
<div id="searchresult"></div>
<p id="moreresults"></p>
</div>