web-dev-qa-db-ja.com

カスタム検索ボックスとボタンを備えたGoogleカスタム検索？

Googleカスタム検索を作成しようとしています（サイトに何らかの検索エンジンが必要です）。自分の検索ボックス（入力フィールド）を使用できるようにする必要があります。正確なサイズである必要があります。また、検索するための独自のボタンを作成できる必要があります。検索ボタンのサイズと背景を変更できるようにする必要があります。まだ完全にはわかりませんが、実際には通常のimgである必要があるかもしれません。

誰かがこれを行う方法を知っていますか？

あなたがグーグルでこれをすることができないならば、あなたはそれをする別の方法を知っていますか？

独自の検索エンジンを使用する以外に方法がない場合は、独自の検索エンジンを作成する方法に関する非常に簡略化されたチュートリアルへのリンクを取得できますか。余計な作業をして学ぶつもりですが、少し試してみましたが、3つの異なるタットを見て、非常に長くて混乱していたので諦めました。間違った場所を探していたといいのですが。

inputgoogle-searchgoogle-custom-search
14
Sean

これが私が使用しているものです。検索ボックスである<input id='q'にいくつかのスタイルを追加する必要があり、<input value='MyButton'はクリックするボタンです。

<!-- Google CSE Search Box Begins  -->
<center>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog">
  <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
  <input value="FORID:11" name="cof" type="hidden"/>
  <input id="q" style="width:600px;" name="q" size="75" type="text"/>
  <input value="MyButton" name="sa" type="submit"/>
</form>
</center>
....

編集：上記は2010年の私の回答です。機能しているかどうかは確認できませんが、これが機能しています。

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en'});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);
    customSearchControl.draw('cse', options);
  }, true);
</script>

詳細については、 https://developers.google.com/custom-search/docs/js/cselement-devguide を参照してください。

19
YOU

「ルックアンドフィール」の下にある新しい「オーバーレイ結果」オプションを備えたソリューションを探しているGoogle社員向け。私はあなたの答えを使用し、それを機能させるためにいくつかのマイナーなハックを追加しました。基本的な考え方は、Googleから提供されたコードを取得し、Googleの検索ボックスとボタンを非表示にして、適切なXXXXX：YYYYコードであなたの答えを使用することです。隠している間<gcse:search></gcse:search>" 使用禁止 display:noneそうしないと、検索結果が機能しません。

<script>
    (function() {
    var cx = 'XXXXXXXXXX:YYYYYYYYY';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work-->
    <gcse:search></gcse:search>
</div>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="">
    <input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
    <input value="FORID:11" name="cof" type="hidden"/>
    <input id="q" style="" name="q" size="75" type="text"/>
    <button class="btn">Search</button>
</form>
18
Ergec

ge stackoverflow、

この問題は、ミニウォークスルーを実行するのに十分なほど私を興奮させました-フラットスパイグラスを扱うv2バーをセットアップしようとしている場合、スパイグラスを機能させたいだけで、カスタムバーを完全に交換したい場合v2を使用して、使用されているスタイルを見つけて見つけ、それらをオーバーライドします。それが役に立てば幸い！ http://t.co/9nvx2l0DeD @ eb_p1

長いアドレス： http://eburnett.hubpages.com/hub/googlecustomsearchenginev2

0
eburnett