CODEWITHSUNDEEP
google-custom-search
Eric
Eric

Reputation: 41

Custom Google Search (CSE): how add the query string at the end of the result links?

I'm looking for a way to configure Google Custom Search to append all search parameters to the generated urls of the search results so that on the target page the search parameters are known. E.g. if the query was "mot1 mot2" then something like "?keyword=mot1+mot2" should be appened to the page url.

If this is not possible, how can I determine the search query used to find a certain page so that I can highlight the search words on that page?

Here is my current script for Google Custom Search:

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

  // AJOUT: Create a Custom Search Element
  var options = {}
  options[google.search.Search.RESTRICT_EXTENDED_ARGS] = {'as_sitesearch' : 'www.monsite.org/rep1/'};
  var customSearchControl = new google.search.CustomSearchControl(cx, options);
  })();
</script>
<gcse:search></gcse:search>

Thank's a lot ! ;-))

Upvotes: 3

Views: 3090

Answers (2)

Eric
Eric

Reputation: 41

**To thank you I give for all my solution after many many search:**
-----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>www.religare.org</title>

</head>
<body>
<style>
/* Affichage des url long pour les livres trouvés */
.gs-webResult.gs-result .gs-visibleUrl { display:block; }
.gs-webResult.gs-result .gs-visibleUrl-short { display:none; }

/* Barre de recherche Google */
#cse { 
    max-width:600px;
    }

/* Enlever l'image du champ de saisie */
#gsc-i-id1 { 
    background-image: none !important;
    }
</style>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script>
  // ID de mon CSE (Custom Search Engine) personnalisé chez Google: https://cse.google.com/cse

  var cx = 'xxx:xxxx';


  // Création de la barre de recherche Google

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

  // Configuration de la recherche (utilise la librairie http://www.google.com/jsapi ci-dessus)
  google.load('search', '1');
  google.setOnLoadCallback(function(){
    var customSearchOptions ={};
    /* Add Custom Search Option: restrict directory */
    customSearchOptions [google.search.Search.RESTRICT_EXTENDED_ARGS]={"as_sitesearch": "www.religare.org/livre/christianisme/"};
    var customSearchControl = new google.search.CustomSearchControl(cx, customSearchOptions );
    /* Add Custom Search Option: more result per page */
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
    /* Add query addition: restrict filetype */
    customSearchControl.setSearchStartingCallback( this, function(control, searcher, query) {
      searcher.setQueryAddition("filetype:htm OR filetype:html");
      }
    );
  }, true);

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

// Ajouter aux URL trouvées (TITRES et IMAGES) les mot-clés recherchés en paramètre ("?mot1=val1&mot2=val2") afin que les pages cibles puissent les surligner une fois ouvertes
function addExtraParams(){

  var searchBoxWords = $("input.gsc-input").val().split(' '),
  appendToQueryStr="";
  separator="?";

  for (i=0;i<searchBoxWords.length;i++){
    appendToQueryStr+=separator+"mot"+i+"="+searchBoxWords[i];
    separator="&";
  }

  // Pour chaque URL des TITRES trouvés: ajouter la chaine de recherche en paramètre (+vider liens data inutiles préemptant href)
  $("a.gs-title").each(function(){
    // On ne garde que la partie gauche de l'url avant le "?" (sans ses paramètres au cas où ils auraient déjà été ajoutés)
    var searchURL = this.href.split('?');
    $(this).attr("href", searchURL[0]+appendToQueryStr);
    $(this).attr("data-cturl", "");
    $(this).attr("data-ctorig", "");
  });

  // Pour chaque URL des IMAGES  trouvées: ajouter la chaine de recherche en paramètre (+vider liens data inutiles préemptant href)
  $("a.gs-image").each(function(){
    // On ne garde que la partie gauche de l'url avant le "?" (sans ses paramètres au cas où ils auraient déjà été ajoutés)
    var searchURL = this.href.split('?');
    $(this).attr("href", searchURL[0]+appendToQueryStr);
    $(this).attr("data-cturl", "");
    $(this).attr("data-ctorig", "");
  });
}

// Actualiser automatiquement (chaque 500ms) l'ajout des mot-clés recherchés en paramètre des URL trouvées
// (car les url de résultat ne seront générées par Google en asynchrones qu'après le submit du formulaire de recherche, et changent si on clic sur la pagination du résultat)
// Utilise la librairie (pour les appel avec $): https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
$(document).ready(function(){
  setInterval(
    function(){
      addExtraParams();
    } , 500 );
});
</script>

<div id="cse">Chargement de la barre de recherche Google en cours...</div>

<script type="text/javascript">
 // Focus automatiquement sur le chp de recherche au chargement de la page
 $(window).load( function() {
   var input = $('#gsc-i-id1');
   input.focus();
  });
</script>

</body>
</html>

Upvotes: 0

NotGaeL
NotGaeL

Reputation: 8484

Whatever you are trying to do it would probably be best (and more reliably) achieved using Google CSE API.

Particularly, check out this answer to get some insight on how to use prefillQuery and execute methods to populate and trigger your customized query.

Nevertheless, if you don't need anything better, here is a quick and dirty solution for the standard setup:

(function() {
  var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ID here
  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);
})();

function addExtraParams(){
  var searchBoxWords = $("input.gsc-input").val().split(' '),
      appendToQueryStr="";
  for (i=0;i<searchBoxWords.length;i++){
    appendToQueryStr+="&word"+i+"="+searchBoxWords[i];
  }
  setTimeout(
    function(){
      $("a.gs-title").each(function(){
        $(this).attr(
          "href",
          $(this).attr("href")+appendToQueryStr
        );
      });
    }
    , 2000
  );
};

$(document).ready(function(){
  setTimeout(
    function(){
      $( 'input.gsc-input' ).keyup( function(e){
        if ( e.keyCode == 13 ) {
          addExtraParams();
        }
      });
      $( 'input.gsc-search-button' ).click(function(){
        addExtraParams();
      });
    }
    , 1000 
  );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<gcse:search></gcse:search>

(The embedded snippet does not capture intro key, run the code on this fiddle for full functionality)

[EDIT] For your test of this code to work, you need to move the line where you load jQuery, so you'll get something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="recherche">`enter code here`
<script type="text/javascript">
  //var cx = '015556257213647319991:iyaymywao1c';

(function() {
  var cx = '015556257213647319991:iyaymywao1c'; // Insert your own Custom Search engine ID here
  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);
})();

function addExtraParams(){
  var searchBoxWords = $("input.gsc-input").val().split(' '),
      appendToQueryStr="";
  for (i=0;i<searchBoxWords.length;i++){
    appendToQueryStr+="&word"+i+"="+searchBoxWords[i];
  }
  setTimeout(
    function(){
      $("a.gs-title").each(function(){
        $(this).attr(
          "href",
          $(this).attr("href")+appendToQueryStr
        );
      });
    }
    , 2000
  );
};

$(document).ready(function(){
  setTimeout(
    function(){
      $( 'input.gsc-input' ).keyup( function(e){
        if ( e.keyCode == 13 ) {
          addExtraParams();
        }
      });
      $( 'input.gsc-search-button' ).click(function(){
        addExtraParams();
      });
    }
    , 1000 
  );
});
</script>

<gcse:search></gcse:search>    
</div>
</body>
</html>

Upvotes: 1

Related Questions