Web Standards

>

Setting up a Custom Site Search

The SOM search engine uses the Google Search Appliance which indexes both www.med.upenn.edu and pennmedicine.org. To set up a custom search of your site(s) on www.med.upenn.edu, follow the instructions below.


Setting up a single search page

For use when the search box and results are displayed ONLY on a single search page.

  1. Create a "search.html" page if one does not already exist.
  2. Add the GSA search plugin along with a javascript library (if one is not already included) inside the <head> tags on the search page.

    <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
     <script src="//search.med.upenn.edu/jquery.gsaEmbed.js"></script>
    </head>

  3. A div is created from the javascript ID given to show search results on the page. Add code below in the content area of your page named "search.html" to display the search results.

    <div id="gsa_search"></div>

  4. Add the following script after the </body> tag to generate the search results.

    <script>
     jQuery(document).ready(function($){
      $('#gsa_search').gsaEmbed();
     });
    </script>

  5. Search result page example:

    <!DOCTYPE html>

    <!--[if lt IE 7]><html class=ie ie6" lang="en"><![endif]-->
    <!--[if IE 7 ]><html class=ie ie7" lang="en"><![endif]-->
    <!--[if IE 8 ]><html class=ie ie8" lang="en"><![endif]-->
    <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><![endif]-->

    <head>
    <meta charset="utf-8">
    <title>Search Results | Site Name | Perelman School of Medicine at the University of Pennsylvania</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//search.med.upenn.edu/jquery.gsaEmbed.js"></script>
    </head>

    <body>
      <div id="gsa_search"></div>
    </body>

    <script>
    jQuery(document).ready(function($){
      $('#gsa_search').gsaEmbed();
    });
    </script>

    </html>

  6. Example of a site using a single search page: Faculty Affairs & Professional Development

Setting up search boxes on multiple pages with a single search results page

For use when the search box and results are displayed on different pages — e.g., when you want the search box to appear on all pages of your site with the results displaying on a separate page.

  1. Create a new page (follow the same instructions for "single search page" above) and save as "results.shtml" (as it corresponds to search form code).
  2. Search form:
    • Include search form code in html according to where the search box is intended to be placed.

      <form action="results.shtml" method="get">
        <input type="text" name="query" />
        <input type="submit" name="form_submit" value="Search" />
      </form>

    • To add specific URL search options (radio buttons, checkboxes, etc) to the search form, you need to add to the html (see example directly below) and script (see customization options under results page)

      <form action="results.shtml" method="get">
        <input type="text" name="query" />
        <input type="submit" name="form_submit" value="Search" />
        <input type="radio" name="searchUrls" value="http://www.med.upenn.edu" /> Perelman School of Medicine
        <input type="radio" name="searchUrls" value="http://www.med.upenn.edu/pysch" /> Dept. of Psych
      </form>

    • Example of a site using a search box with URL options (radio buttons): Department of Psychiatry

Search customization options

Limit number of results per page (any additional results will paginate)

'resultsPerPage': #

Example:

<script>
jQuery(document).ready(function($){
  $('#gsa_search').gsaEmbed({
    'resultsPerPage': 1
  });
});
</script>

Restrict search results to one specific URL (default will search all of www.med)

'searchUrls': 'http://www.med.upenn.edu/dept'

Restrict search to several URLs

'searchUrls': 'http://www.med.upenn.edu/dept,http://www.med.upenn.edu/dept2'

Example:

<script>
jQuery(document).ready(function($){
  $('#gsa_search').gsaEmbed({
    'searchUrls': 'http://www.med.upenn.edu/pmacswebteam'
  });
});
</script>

Define options to select which URL to search

(requires additional html markup; see adding specific URL search options above)

'searchUrlOptions': {
  'Name/title of URL': 'http://www.med.upenn.edu/department',
  'Name/title of URL': 'http://www.med.upenn.edu/department2'
}

Example

<script>
jQuery(document).ready(function($){
  $('#gsa_search').gsaEmbed({
    'searchUrlOptions': {
    'Dept. of Psych':'http://www.med.upenn.edu/psych',
    'Perelman School of Medicine': 'http://www.med.upenn.edu'
    }
  });
});
</script>

 

If you have any questions, please contact PMACS.