Пользовательский поиск Google с пользовательским окном поиска и кнопкой?

Question

Я пытаюсь сделать пользовательский поиск Google (мне просто нужна какая-то поисковая система на моем сайте), и мне нужно сделать так, чтобы я мог использовать свое собственное окно поиска (поле ввода). Мне нужно, чтобы он был точного размера. Я также должен иметь возможность сделать свою собственную кнопку для поиска. Я собираюсь быть в состоянии изменить размер и фон кнопки поиска. Я еще не совсем уверен, но на самом деле мне может понадобиться, чтобы это был обычный img.

Кто-нибудь знает, как это сделать?

Если вы не можете сделать это с Google, знаете ли вы другой способ сделать это?

Если нет другого способа, кроме использования вашей собственной поисковой системы, могу ли я получить ссылку на очень упрощенный учебник о том, как сделать свой собственный. Я готов поставить дополнительную работу, чтобы учиться, но я попытался немного, и, посмотрев на три разных варианта, я сдался, потому что они были очень очень длинными и запутанными. Надеюсь, я просто искал не в тех местах.

Answer 1

Вот тот, который я использую, вам просто нужно добавить несколько стилей к <input id='q', который является окном поиска, а <<code>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

Answer 2

Для тех, кто ищет решение с новой опцией «Overlay Results» в разделе «Look and Feel». Я использовал ответ ВАС и добавил несколько мелких хаков, чтобы это сработало. Основная идея заключается в том, чтобы получить код, который 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>

Answer 3

ge stackoverflow,

проблема действительно привела меня в достаточное количество раз для того, чтобы сделать мини-обход - если вы пытаетесь настроить бар v2, имея дело с плоским подзорным стеклом, просто хотите заставить работать подзорную трубу, хотите заменить пользовательская панель в целом, используя v2, находя и находя используемые стили и переопределяя их. Надеюсь, поможет! http://t.co/9nvx2l0DeD @ eb_p1

длинный адрес: http://eburnett.hubpages.com/hub/googlecustomsearchenginev2