如果說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>

PS:如果網友對Google API有興趣,
也可以參考我所撰寫的【Google APIs程式工具錦集】一書。


arrow
arrow
    全站熱搜

    賽拉維‧柯南 發表在 痞客邦 留言(11) 人氣()