谷歌自定义搜索引擎

 http://fis.io/ajax-google-custom-search-engine.html 

 

1.定义自己的搜索框

<div class="search">

                    @using (Html.BeginForm("Search", "Home", FormMethod.Get))

                    {

                        <input type="text" name="q" id="search" />

                        <button type="submit">搜索</button>

                    }

 </div>

 

2.Search页面定义，以显示搜索结果

<div id="main">

<div id="cse" style="width: 100%;">

    Loading</div>

</div>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">

    google.load('search', '1', { language: 'zh-CN', "nocss": true });

 

    google.setOnLoadCallback(function () {

        var customSearchControl = new google.search.CustomSearchControl('001974288373642395983:j8fgpl2zjfu');

    //通过谷歌自定义搜索(http://www.google.com/cse/)注册所对应要搜索的网站得到相应的CustomSearchControl

        customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

        customSearchControl.setSearchCompleteCallback(null, function () {

            $('input#search').val('@Request.QueryString["q"]').select();

            $('a.gs-title').unwrap().wrap('<h3></h3>').each(function () {

                var title = $(this).html().replace(/\|.*/g, '');

                $(this).html(title);

            });

            $('b:contains("...")').contents().unwrap();

        });

 

        customSearchControl.draw('cse');

        customSearchControl.execute('@Request.QueryString["q"]');

    }, true);

</script>

 

 3.CSS自定义css样式

/* Search

------------------------------------------*/

.gsc-tabsAreaInvisible, .gsc-search-box, .gsc-adBlock, .gsc-resultsHeader, 

.gs-visibleUrl-short, .gs-visibleUrl-long, .gs-watermark, .gcsc-branding

{

    display: none;

}

.gsc-results a

{

    cursor: pointer;

}

.gsc-result-info

{

    margin-bottom: 10px;

}

.gs-title

{

    color: #105CB6;

}

.gs-snippet

{

    margin-bottom: 5px;

    color: #333;

}

.gs-snippet b

{

    padding: 1px 3px;

    background-color: #FEA;

}

.gsc-cursor

{

    margin: 25px 0;

    text-align: center;

}

.gsc-cursor-page

{

    border: 1px solid #DDD;

    color: #000;

    margin: 0 3px;

    padding: 3px 5px;

    text-decoration: none;

    cursor: pointer;

    display: inline-block;

}

.gsc-cursor-current-page

{

    background-color: #AAD069;

    color: #000;

    font-weight: bold;

    cursor: default;

}