Google Custom Search z niestandardowym polem wyszukiwania i przyciskiem?

Question

Próbuję wykonać niestandardowe wyszukiwanie Google (potrzebuję tylko wyszukiwarki na mojej stronie) i muszę je ustawić, aby móc korzystać z własnego pola wyszukiwania (pola wejściowego). Muszę mieć dokładną wielkość. Muszę też mieć własny przycisk do wyszukiwania. Będę musiał zmienić rozmiar i tło przycisku wyszukiwania. Nie jestem jeszcze do końca pewien, ale może potrzebuję tego, żeby być zwykłym obrazkiem.

Czy ktoś wie, jak to zrobić?

Jeśli nie możesz tego zrobić w Google, czy znasz inny sposób na zrobienie tego?

Jeśli nie ma innej metody oprócz korzystania z własnej wyszukiwarki, czy mogę uzyskać link do bardzo uproszczonego samouczka dotyczącego tworzenia własnych. Jestem gotów poświęcić dodatkową pracę, aby się czegoś nauczyć, ale spróbowałem trochę, a po przyjrzeniu się trzem różnym tonom zrezygnowałem, ponieważ były bardzo długie i mylące. Mam nadzieję, że szukałem tylko w niewłaściwych miejscach.

Answer 1

Oto jeden używam, wystarczy dodać kilka stylów <input id='q' która jest pole wyszukiwania, a < input value='MyButton' jest przycisk do klikania

<!-- 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> 
.... 

Edit: Powyżej jest moja odpowiedź od 2010 roku nie mogę potwierdzić, że działa lub nie, ale tutaj działa.

<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> 

Aby uzyskać więcej informacji: patrz https://developers.google.com/custom-search/docs/js/cselement-devguide

Answer 2

Dla pracowników Google, którzy poszukują rozwiązania z opcją nowe „overlay Wyniki” pod „Look and Feel”. Użyłem odpowiedzi YOU i dodałem kilka drobnych hacków, aby to działało. Podstawowy pomysł to kod, który Google daje, ukryj pole i przycisk wyszukiwania Google i użyj odpowiedzi YOU z odpowiednimi kodami XXXXX: YYYY. Ukrywając <gcse:search></gcse:search>" nie używaj display:none w przeciwnym razie wyniki wyszukiwania nie będą działać.

<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,

kwestia naprawdę mnie wystrzelił w górę na tyle, aby zrobić mini przechodni - Jeśli próbujesz założyć pasek v2, do czynienia z płaską lunetę, po prostu chcą aby uruchomić lunetę, chcesz zastąpić niestandardowy pasek przy użyciu v2, znajdując i lokalizując używane style i przesyłając je. Mam nadzieję, że to pomoże! http://t.co/9nvx2l0DeD @ eb_p1

długi adres: http://eburnett.hubpages.com/hub/googlecustomsearchenginev2