[Web Form] google站內搜尋FancyBox應用

有了Google後，現在站內搜尋很方便

照著Google的方法，一步一步走，然後貼上程式碼就OK了

Google自訂搜尋 ，但這不是我要說的！


然後也因為很方便，所以樣式反而都是公版

以下是用FancyBox應用，而達成自訂Google搜尋樣式

也有浮動視窗的效果。

首先你需要先去Google申請ID，上方連結有

再來再去下載 fancybox

之後你要確定你會點程式！

1.在你的專案裡開一個新的webform在body加入

    <form id="form1" runat="server">
    <div>
        <div id="cse" style="width: 100%;">Loading</div>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
            function parseQueryFromUrl() {
                var queryParamName = "q";//接收參數的名稱
                var search = window.location.search.substr(1);
                var parts = search.split('&');
                for (var i = 0; i < parts.length; i++) {
                    var keyvaluepair = parts[i].split('=');
                    if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
                        return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ' '));
                    }
                }
                return '';
            }

            google.load('search', '1', { language: 'zh-TW' });
            google.setOnLoadCallback(function () {
                var customSearchControl = new google.search.CustomSearchControl('google申請的ID');

                customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
                customSearchControl.draw('cse');
                var queryFromUrl = parseQueryFromUrl();
                if (queryFromUrl) {
                    customSearchControl.execute(queryFromUrl);
                }
            }, true);
        </script> 
        <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
    </div>
    </form>

2.在你有搜尋欄的那個頁面加入

<link href="Scripts/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script src="Scripts/jquery.fancybox-1.3.4.pack.js"></script>

3.設定你TEXT的ID，跟Button onclick的function

    <form>
        <input type="text" id="txtSearch" placeholder="Search" />
        <button type="button" onclick="search()">SEARCH</button>
    </form>

4.同搜尋欄那一頁，寫function

<script>
    function search() {
        var q = $("#txtSearch").val();
        if (q != "") {
            $.fancybox({
                'href': '剛剛新增的頁面.aspx?q=' + q,//傳遞的參數
                'type': 'iframe',
                'padding': 0,
                'closeBtn': false,
                'width': 690,
                'height': 500,
                'overlayOpacity': '0.6'
            });
        }
    }
</script>

設定完後，你就可以用你自己的搜尋框去站內搜尋了。

參考：冠譯