2016-03-30 9 views
0

V1コード私の検索エンジンをHTMLページに挿入

こんにちは、こんにちは。私は自分の検索エンジンのV1コードをhtmlページに挿入したい。基本的な例は、Googleカスタム検索エンジンの命令に与えられた:

Simple V1 Code

しかし、検索フォームが表示されません:私は作るために必要なもの

<html> 
 
<head> 
 
<title>my site</title> 
 
... 
 
<head> 
 
<body> 
 
<div1>...</div1> 
 
<div id='cse' style='width: 100%;'>Loading</div> 
 
<script src='//www.google.com/jsapi' type='text/javascript'></script> 
 
<script type='text/javascript'> 
 
google.load('search', '1', {language: 'ru', style: google.loader.themes.V2_DEFAULT}); 
 
google.setOnLoadCallback(function() { 
 
    var customSearchOptions = {}; 
 
    var orderByOptions = {}; 
 
    orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}]; 
 
    customSearchOptions['enableOrderBy'] = true; 
 
    customSearchOptions['orderByOptions'] = orderByOptions; 
 
    var imageSearchOptions = {}; 
 
    imageSearchOptions['layout'] = 'google.search.ImageSearch.LAYOUT_POPUP'; 
 
    customSearchOptions['enableImageSearch'] = true; 
 
    var customSearchControl = new google.search.CustomSearchControl('018041543241092912643:0t1ehacm74m', customSearchOptions); 
 
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
 
    var options = new google.search.DrawOptions(); 
 
    options.enableSearchResultsOnly(); 
 
    options.setAutoComplete(true); 
 
    customSearchControl.draw('cse', options); 
 
    function parseParamsFromUrl() { 
 
    var params = {}; 
 
    var parts = window.location.search.substr(1).split('&'); 
 
    for (var i = 0; i < parts.length; i++) { 
 
     var keyValuePair = parts[i].split('='); 
 
     var key = decodeURIComponent(keyValuePair[0]); 
 
     params[key] = keyValuePair[1] ? 
 
      decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) : 
 
      keyValuePair[1]; 
 
    } 
 
    return params; 
 
    } 
 
    var urlParams = parseParamsFromUrl(); 
 
    var queryParamName = 'q'; 
 
    if (urlParams[queryParamName]) { 
 
    customSearchControl.execute(urlParams[queryParamName]); 
 
    } 
 
}, true); 
 
</script> 
 
<style type='text/css'> 
 
    .gsc-control-cse { 
 
    font-family: Arial, sans-serif; 
 
    border-color: #FFFFFF; 
 
    background-color: #FFFFFF; 
 
    } 
 
    .gsc-control-cse .gsc-table-result { 
 
    font-family: Arial, sans-serif; 
 
    } 
 
    .gsc-tabHeader.gsc-tabhInactive { 
 
    border-color: #FF9900; 
 
    background-color: #FFFFFF; 
 
    } 
 
    .gsc-tabHeader.gsc-tabhActive { 
 
    border-color: #E9E9E9; 
 
    background-color: #E9E9E9; 
 
    border-bottom-color: #FF9900 
 
    } 
 
    .gsc-tabsArea { 
 
    border-color: #FF9900; 
 
    } 
 
    .gsc-webResult.gsc-result, .gsc-results .gsc-imageResult { 
 
    border-color: #FFFFFF; 
 
    background-color: #FFFFFF; 
 
    } 
 
    .gsc-webResult.gsc-result:hover, .gsc-imageResult:hover { 
 
    border-color: #FFFFFF; 
 
    background-color: #FFFFFF; 
 
    } 
 
    .gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b { 
 
    color: #0000CC; 
 
    } 
 
    .gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b { 
 
    color: #0000CC; 
 
    } 
 
    .gs-webResult.gs-result a.gs-title:hover, .gs-webResult.gs-result a.gs-title:hover b, .gs-imageResult a.gs-title:hover, .gs-imageResult a.gs-title:hover b { 
 
    color: #0000CC; 
 
    } 
 
    .gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b { 
 
    color: #0000CC; 
 
    } 
 
    .gsc-cursor-page { 
 
    color: #0000CC; 
 
    } 
 
    a.gsc-trailing-more-results:link { 
 
    color: #0000CC; 
 
    } 
 
    .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType { 
 
    color: #000000; 
 
    } 
 
    .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl { 
 
    color: #008000; 
 
    } 
 
    .gs-webResult div.gs-visibleUrl-short { 
 
    color: #008000; 
 
    } 
 
    .gs-webResult div.gs-visibleUrl-short { 
 
    display: none; 
 
    } 
 
    .gs-webResult div.gs-visibleUrl-long { 
 
    display: block; 
 
    } 
 
    .gs-promotion div.gs-visibleUrl-short { 
 
    display: none; 
 
    } 
 
    .gs-promotion div.gs-visibleUrl-long { 
 
    display: block; 
 
    } 
 
    .gsc-cursor-box { 
 
    border-color: #FFFFFF; 
 
    } 
 
    .gsc-results .gsc-cursor-box .gsc-cursor-page { 
 
    border-color: #E9E9E9; 
 
    background-color: #FFFFFF; 
 
    color: #0000CC; 
 
    } 
 
    .gsc-results .gsc-cursor-box .gsc-cursor-current-page { 
 
    border-color: #FF9900; 
 
    background-color: #FFFFFF; 
 
    color: #0000CC; 
 
    } 
 
    .gsc-webResult.gsc-result.gsc-promotion { 
 
    border-color: #336699; 
 
    background-color: #FFFFFF; 
 
    } 
 
    .gsc-completion-title { 
 
    color: #0000CC; 
 
    } 
 
    .gsc-completion-snippet { 
 
    color: #000000; 
 
    } 
 
    .gs-promotion a.gs-title:link,.gs-promotion a.gs-title:link *,.gs-promotion .gs-snippet a:link { 
 
    color: #0000CC; 
 
    } 
 
    .gs-promotion a.gs-title:visited,.gs-promotion a.gs-title:visited *,.gs-promotion .gs-snippet a:visited { 
 
    color: #0000CC; 
 
    } 
 
    .gs-promotion a.gs-title:hover,.gs-promotion a.gs-title:hover *,.gs-promotion .gs-snippet a:hover { 
 
    color: #0000CC; 
 
    } 
 
    .gs-promotion a.gs-title:active,.gs-promotion a.gs-title:active *,.gs-promotion .gs-snippet a:active { 
 
    color: #0000CC; 
 
    } 
 
    .gs-promotion .gs-snippet, .gs-promotion .gs-title .gs-promotion-title-right, .gs-promotion .gs-title .gs-promotion-title-right * { 
 
    color: #000000; 
 
    } 
 
    .gs-promotion .gs-visibleUrl,.gs-promotion .gs-visibleUrl-short { 
 
    color: #008000; 
 
    } 
 
</style> 
 
<div2>...</div2> 
 
</body> 
 
</html>

コードを正しく挿入するには?ありがとう。

答えて

0

検索結果のみを選択したようですが、検索フォームは表示されません。この方法は、アドレスバーから実行するように設計されています。例えば。 http://www.example.com/yourSearchPage?q=searchterm

これで、そのページに検索結果が表示されます。