[Google API]搜尋控制容器之google.search.SearchForm @ 賽拉維的秋天

如果說google.search.SearchControl是全自動的搜尋控制容器，
那麼google.search.SearchForm就是純手工的搜尋控制容器。
相對於google.search.SearchControl擁有眾多的函式可以自動處理搜尋的過程；
google.search.SearchForm只提供了三種基本函式，
分別是setOnSubmitCallback、setOnClearCallback與execute。
其他進階的功能就得由開發者自行撰寫函式才能完成。
要使用google.search.SearchForm這個搜尋控制容器，
需要使用下列語法建構出該搜尋控制容器的物件。

var searchForm = new google.search.SearchForm(enableClear, element);

其中
enableClear –若為 ture 時，搜索輸入欄位就會包含一個清除搜尋結果的按鈕，否則將不會有清除搜尋結果的按鈕。
element – 通常是<div>元素。搜索輸入欄位會顯示在<div>區塊元素中。

以下是google.search.SearchForm三個函式的介紹：
setOnSubmitCallback(object, method)
本函式可以讓我們設定點選搜尋按鈕後所呼叫的物件(object)與函式(method)，
此外搜尋輸入欄位的值也會被傳遞到要被呼叫的函式中。

setOnClearCallback(object, method)
本函式將會設定按下搜索輸入欄位的「清除」按鈕時被呼叫的物件(object)與函式(method)。
此外，搜尋輸入欄位的值也會被傳遞到要被呼叫的函式中。

execute(query)
利用execute函式，可以將所傳入的字串(query)自動進行submit的動作。

最後，
有興趣的朋友可以根據上述函式撰寫如下的範例程式碼，
這樣就可以瞭解google.search.SearchForm與上述三個函式的互動關係。

<html>
  <head>
    <title>My Google AJAX Search API Application</title>
    <script src="http://www.google.com/jsapi?key=金鑰" type="text/javascript">
    </script>
    <script language="Javascript" type="text/javascript">
    google.load("search", "1");
    var searcher;
    function OnLoad() {
      //取得HTML 元素
      var container = document.getElementById("searchcontrol");
      // 建立搜尋控制容器
      var searchControl = new google.search.SearchForm(true, container);
      //設定按下搜尋按鈕會呼叫的函式
      searchControl.setOnSubmitCallback(this,onFunction);
      //設定按下取消搜尋按鈕會呼叫的函式
      searchControl.setOnClearCallback(this,onFunction);
      //執行搜尋
      searchControl.execute("test");
    }
    //按下搜尋按鈕被呼叫的函式
    function onFunction(form)
    {
        //彈出視窗顯示使用者所輸入的搜尋關鍵字
        window.alert(form.input.value);
    }
    //HTML載入時呼叫OnLoad函式
    google.setOnLoadCallback(OnLoad);
    </script>
  </head>
  <body>
    <div id="searchcontrol">Loading...</div>
  </body>
</html>