2010-02-01 2 views
14

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

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

Если вы не можете сделать это с помощью Google, знаете ли вы, как это сделать?

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

ответ

18

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

+0

И что те XXXXX и YYYYYYY? – lzap

+0

те XXXX и YYYYY - это числа, определенные в коде, который вы получаете из Google Custem Search. – Ergec

+0

Что должно быть действительно в действии = "http: // myblog"? –

18

Для Googlers, которые ищут решение с опцией «новый Overlay Результаты» в разделе «Внешний вид и». Я использовал ваш ответ и добавил некоторые незначительные хаки, чтобы заставить его работать. Основная идея - получить код, который Google дает вам, скрыть окно поиска Google и кнопку и использовать ответ YOU с соответствующими кодами 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> 
+2

Привет. Это вызывает перезагрузку страницы, занимает много времени и добавляет некоторые символы в URL. Можете ли вы рассказать о том, как получить результаты так же, как код, скопированный из Google, так как вы делаете именно то, что я хочу, за исключением вышеуказанных факторов. –

0

GE StackOverflow,

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

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

+0

Добавьте его в качестве комментария или уточните. – Hemanth

Смежные вопросы