Add a Pika Search Box to Your Webpage

Instructions and code snippet to add a Pika catalog search box to your library’s webpage.


Table of Contents

Top of page

  • To create a search box, embed the following code snippet in the appropriate place on your webpage.

  • Change the URL to your appropriate Pika URL, keeping the "/Union/Search" element in the URL 

  • If your site has a stylesheet, we recommend you use the styling rules from the <style> tag in the provided code snippet and add them to your site stylesheet, but this is not required.

  • Modify styling and HTML to fit your needs.

The "target" attribute of the <form> tag will cause the search to load in a new browser tab. Remove the target attribute or set to "_self" to load the search in the same browser tab as the search box page.

Top of page

Code Snippet

Copy all of the code below, but change https://opac.marmot.org/Union/Search to your library’s Pika address :

<form id="searchForm" class="search" action="https://opac.marmot.org/Union/Search" method="get" target="_blank">
<input name="searchSource" value="local" type="hidden">
<input name="basicType" value="Keyword" type="hidden">
<div>
<input id="lookfor" title="Enter one or more terms to search for. Surrounding a term with quotes will limit result to only those
that exactly match the term." name="lookfor" value="" size="40" type="text">
<input id="searchBarFind" type="submit" alt="Search Catalog" value="Search Catalog">
</div>
<style type="text/css" scoped>
#lookfor {
/font-size: 9pt; / optional */
padding: 5px 10px;
}
#searchBarFind {
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Arial;
color: #ffffff;
font-size: 12pt;
text-shadow: 1px 1px 3px #525B5D;
background: #428BCA;
padding: 8px 15px;
text-decoration: none;
text-align: center;
}

#searchBarFind:hover {
background: #3276B1;
text-decoration: none;
-webkit-box-shadow: 0px 1px 3px #525B5D;
-moz-box-shadow: 0px 1px 3px #525B5D;
box-shadow: 0px 1px 3px #525B5D;
}
</style>
</form>

Below is an example of what the catalog search box will look like, minus any styling unique to your library’s website.

Top of page

Adding a search box to your Drupal 7 site

Download the module from our GitHub repository and follow the instructions in the readme.md file.

Top of page

Add an Archive search box to your Webpage

The critical change from a regular catalog search box is setting the value of the "searchSource" input tag to "islandora" instead of “local.”

<form id="searchForm" class="search" action="https://opac.marmot.org/Union/Search" method="get" target="_blank">
<input name="searchSource" value="islandora" type="hidden">
<input name="basicType" value="Keyword" type="hidden">
<div>
<input id="lookfor" title="Enter one or more terms to search for. Surrounding a term with quotes will limit result to only those
that exactly match the term." name="lookfor" value="" size="40" type="text">
<input id="searchBarFind" type="submit" alt="Search Archive" value="Search Archive">
</div>
<style type="text/css" scoped>
#lookfor {
/font-size: 9pt; / optional */
padding: 5px 10px;
}
#searchBarFind {
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: Arial;
color: #ffffff;
font-size: 12pt;
text-shadow: 1px 1px 3px #525B5D;
background: #428BCA;
padding: 8px 15px;
text-decoration: none;
text-align: center;
}

#searchBarFind:hover {
background: #3276B1;
text-decoration: none;
-webkit-box-shadow: 0px 1px 3px #525B5D;
-moz-box-shadow: 0px 1px 3px #525B5D;
box-shadow: 0px 1px 3px #525B5D;
}
</style>
</form>

Below is an example of what the archive search box will look like, minus any styling unique to your library’s website.

Top of page