研究了一下Google Ajax Search API, 給部落格做了個樣品

效果比較簡陋,沒有美工的細胞:(
很多代碼都是直接從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="#" onclick="document.getElementById('searchresultdialog').className = 'hide';">關閉</a></p>
        <div id="searchresult"></div>
        <p id="moreresults"></p>
    </div>