Add a Pika Search Box to Your Webpage

Owned by Ashley Sneesby, created
Last updated: May 10, 2024
3 min read

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

Table of Contents

Top of page

Adding a search box

  • 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

Accessibility

The input boxes for catalog and archive search phrases have an ARIA label used by screen reader software.

If you style the button corresponding with the search box, make sure to use a sufficient contrast to meet accessibility standards. The AA standard contrast is 4.5:1.

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" aria-label=”Enter search phrase here” 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." placeholder="Enter a search phrase here" name="lookfor" value="" size="40" type="text">
<input id="searchBarFind" type="submit" alt="Search Catalog" value="Search Catalog">
</div>
<style>
#lookfor {
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: #0A75E3; /* accessible contrast blue against white https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0A75E3 */
padding: 8px 15px;
text-decoration: none;
text-align: center;
}

#searchBarFind:hover {
background: #3276B1; /* accessible contrast darker blue https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=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.

Screenshot of the pika catalog search box and button on a library 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" aria-label=”Enter search phrase here” 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." placeholder="Enter a search phrase here" name="lookfor" value="" size="40" type="text">
<input id="searchBarFind" type="submit" alt="Search Archive" value="Search Archive">
</div>
<style>
#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: #0A75E3; /* accessible contrast blue against white https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0A75E3 */
padding: 8px 15px;
text-decoration: none;
text-align: center;
}

#searchBarFind:hover {
background: #3276B1; /* accessible contrast darker blue https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=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.

Screenshot of the pika archive search box and button on a library website

Top of page

Related Documentation