GCSE: Campus Search, Locally Hosted Search Results Instructions - Websites - UIT

These instructions are for migrating from Google Search Appliance (GSA) campus search to Google Custom Search Engine (GCSE) campus search. This option searches for content campus-wide, i.e. content on any utah.edu domain (as opposed to searching just your site or a specific collection of sites), and displays search results on a locally hosted page within your website.

Example Results (default)

Example Results (custom)

1. Create a local page in your site to host the search results

We recommend creating either a page or a directory+index page in your website's root directory named "search". On this page, you will need a large search box that spans across the page. You can either use the default GCSE search box (easiest option - nothing to do on your part), or you can create your own to make it look fancier (see examples above).

2. Insert the GCSE campus search code on the search results page

Copy the following code, and paste it into a <div> element in your site's <body> section, where you want the search results to render.

Using a default GCSE search box on the search results page

<script>
    (function() {
        var cx = '008932147021757332745:56t7vy9cw9w';
        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>

Using a custom built GCSE search box on the search results page

<script>
    (function() {
        var cx = '008932147021757332745:56t7vy9cw9w';
        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:searchresults-only></gcse:searchresults-only>

3. Add the search box HTML code

Add the following HTML code to your pages or template where you would like to see the search box that will search the entire campus.

<form id="gcse_search" action="/<search-page-path>" method="get" name="search" role="search">
    <label for="gcse_searchbox">Search Campus:</label>
    <input id="gcse_searchbox" type="text" name="q" value="" 
        title="enter search terms" onfocus="noWatermark();" 
        onblur="watermark();" />
    <input id="gcse_searchbutton" type="image" name="btnG" value="Submit Search"
        src="//gcse.search.utah.edu/_images/gcse_search_btn.png"
        title="submit search" alt="submit search" />
    <img src="//gcse.search.utah.edu/_images/spacer.gif" onload="loadWatermark();">
</form>

4. Add the styles and scripts

Each individual web site uses different styles and scripts that may affect this search code differently. The following is a best attempt of trying to make the search box look and function correctly in most sites.

Add the following style and script code into your HTML pages or template so that it shows up in the <head> section of the pages with your search box.

<style type="text/css">

  #gcse_search{
    background:#fff;
    border:1px solid black;
    float:right;
    margin: 0;
    padding:0;
    position:relative;
    text-align:left;
    width: 230px; 
  } 

  #gcse_searchbox {
    border:0;
    color: #666;
    font:15px Helvetica, san-serif;
    height:20px;
    padding:3px 5px;
    width:195px;
  } 

  .gcse_watermark {
    background: #FFF
                url('//gcse.search.utah.edu/_images/gcse_campus.png') 
                no-repeat 5px 3px; 
  }

  #gcse_searchbutton { 
    padding:3px;
    position:absolute;
    right:0;
    top:0;
    width:20px;
  } 

  #gcse_searchbutton:focus,
  #gcse_searchbutton:hover,
  #gcse_searchbutton:active {
    background-color:#e8e8e8;
  } 

  #gcse_search label {
    height:1px;
    left:-10000px;
    overflow:hidden;
    position:absolute;
    top:auto;
    width:1px; 
  }

</style>
<script type="text/javascript">

  // add or remove watermark if no text is entered
  function watermark(){
    if (inputId.value.length > 0){
      if (inputId.className == "gcse_watermark")
        inputId.className = "";
    }else
      inputId.className = "gcse_watermark";
  }

  // remove watermark when input has focus
  function noWatermark() {
    inputId.className = "";
  } 

  var inputId; //declare reference to input 
  function loadWatermark() {
    inputId = document.getElementById("gcse_searchbox"); 
    watermark(); //initialize watermark
  }

</script>

You may also download and use GCSE images locally

Web Support & Usability

University Information Technology (UIT)

GCSE: Campus Search with Locally Hosted Search Results

1. Create a local page in your site to host the search results

2. Insert the GCSE campus search code on the search results page

3. Add the search box HTML code

4. Add the styles and scripts

Download and use GCSE Images Locally