Google Custom Search mit benutzerdefiniertem Suchfeld und Schaltfläche?

Question

Ich versuche, eine benutzerdefinierte Google-Suche zu erstellen (ich brauche nur eine Art von Suchmaschine auf meiner Website), und ich muss es so machen, dass ich mein eigenes Suchfeld (Eingabefeld) verwenden kann. Es muss die exakte Größe haben. Ich muss auch in der Lage sein, meine eigene Schaltfläche für die Suche zu erstellen. Ich muss in der Lage sein, die Größe und den Hintergrund der Suchschaltfläche zu ändern. Ich bin mir noch nicht ganz sicher, aber vielleicht muss es ein normales Bild sein.

Weiß jemand, wie man das macht?

Wenn Sie dies nicht mit Google tun können, kennen Sie eine andere Möglichkeit?

Wenn es keine andere Möglichkeit gibt, als Ihre eigene Suchmaschine zu benutzen, kann ich bitte einen Link zu einer sehr einfachen Anleitung bekommen, wie ich meine eigene erstellen kann. Ich bin bereit, die zusätzliche Arbeit auf mich zu nehmen, um zu lernen, aber ich habe es versucht, und nachdem ich mir drei verschiedene Anleitungen angesehen hatte, gab ich auf, weil sie sehr lang und verwirrend waren. Ich hoffe, ich habe nur an den falschen Stellen gesucht.

Answer 1

Hier ist die, die ich benutze, Sie müssen nur einige Stile hinzufügen zu <input id='q' welches das Suchfeld ist, und < input value='MyButton' ist die Schaltfläche zum Anklicken

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

bearbeiten : Oben ist meine Antwort aus dem Jahr 2010, ich kann nicht bestätigen, dass sie funktioniert oder nicht mehr, aber hier ist die, die funktioniert.

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

Für weitere Informationen: siehe https://developers.google.com/custom-search/docs/js/cselement-devguide

Answer 2

Für Googler, die nach einer Lösung mit der neuen Option "Overlay Results" unter "Look and Feel" suchen. Ich habe die Antwort von YOU verwendet und einige kleine Hacks hinzugefügt, damit es funktioniert. Die Grundidee ist, den Code zu erhalten, den Google Ihnen gibt, das Suchfeld und die Schaltfläche von Google auszublenden und die Antwort von Ihnen mit den richtigen XXXXX:YYYY-Codes zu verwenden. Beim Ausblenden <gcse:search></gcse:search>" nicht verwenden display:none sonst funktionieren die Suchergebnisse nicht.

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

Das Thema hat mich so begeistert, dass ich einen kleinen Rundgang gemacht habe - wenn Sie versuchen, eine v2-Leiste einzurichten, mit dem flachen Fernglas zu arbeiten, nur das Fernglas zum Laufen bringen wollen, die benutzerdefinierte Leiste ganz durch v2 ersetzen wollen, die verwendeten Stile finden und sie überschreiben wollen. Hoffentlich hilft es! http://t.co/9nvx2l0DeD @eb_p1

lange Adresse: http://eburnett.hubpages.com/hub/googlecustomsearchenginev2