2016-07-30 30 views
3

Also ich möchte das Styling meiner eigenen Google-Box beibehalten, aber ich möchte direkt auf die Google-Suche meiner Seite verweisen.Wie füge ich eine benutzerdefinierte Google-Suche zu meinem benutzerdefinierten Suchfeld hinzu?

Der Code sieht etwa so aus:

<......> 
</ul> 
<form action="" method="post" id="FORM_10"> 
    <div id="DIV_11"> 
    <link href="css/search.css" rel="stylesheet" type="text/css" id="LINK_12"> 

    <div id="DIV_14"> 
     <div id="DIV_15"> 
      <div id="DIV_16"> 
      <div id="DIV_17"> 
       <div id="DIV_18"> 
       <div id="DIV_19"> 
        <div id="DIV_20"> 
        <div id="DIV_21"> 
         <input value="sdasdsad" id="INPUT_22" name="keys" size="60" maxlength="255" type="text"> 
        </div> 

        </div> 
        <input id="INPUT_44" name="op" value="search" type="submit"> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </form> <a href="#" id="A_45" title="english">en</a> <a href="#" id="A_46" title="contacts">contacts</a> 
    </div>  

und ich mag irgendwie die Funktionalität hinzufügen, als ob gcse:search in meinem Code ist, aber ich will mit meinem eigenen stilisierten Suchfeld bleiben, aber wenn Der Benutzer fügt seine Zeichenfolge in das Suchfeld ein und erhält ein Popup-Overlay-Fenster mit Google-Suchergebnissen auf der angegebenen Website.

Worst-Case-Szenario. Ich würde gerne herausfinden, wie ich das Google-Suchfeld richtig anpassen kann.

+0

Ich verwende die CSE-Option "results only" und übergibt die Abfragezeichenfolge aus unseren Suchfeldern auf der Site. –

Antwort

1

Google hat die Unterstützung für „custom“ Suchmaschinen, die Sie here registrieren können, die Sie Domänen (und Pfade) angeben können, die Sie in die Suche ein (das Äquivalent eines site: Parameter in der Suche enthalten sein sollen):

Google CSE

Nun, für dieses Beispiel habe ich eine Suche nach https://developer.mozilla.org gemacht, da ihre interne Suche nicht so gut ist wie bei Google. I markierte es MDN, und angeklickt (nachher zu den Nutzungsbedingungen einverstanden):

Create the search engine for mozilla

Von hier haben wir den Quellcode mit der Get Code-Taste zu verwenden, bekommen, was uns einen HTML-Snippet geben einführen. Mine sah wie folgt aus:

<script> 
    (function() { 
    var cx = '005381150112327209486:iwm6p6iff_4'; 
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; 
    gcse.async = true; 
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(gcse, s); 
    })(); 
</script> 
<gcse:search></gcse:search> 

Legen Sie das Skript in Ihrem <head> und legen Sie die <gcse:search> Tag, wo Sie die Eingabe angezeigt werden soll. Lesen Sie über benutzerdefinierte Styling dieser here

Ich hoffe, dies war hilfreich!

0

In Javascript nach dem Klick auf die Suchtaste Sie auf der Google-Suchergebnisseite umleiten kann über diesen Link http://www.google.it/search?q= Sie die URL conatening die Suchabfrage Zum Beispiel erstellen können, wenn Sie ein Haus suchen möchten Sie ti umleiten diese Seite http://www.google.it/search?q=house

+0

Dadurch wird die Sicherheitsrichtlinie für die gleiche Herkunft des meisten Browsers verletzt. Siehe [MDN] (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) – MayorMonty