Add a Pika Search Box to Your Webpage
- Ashley Sneesby
- Pascal Brammeier
Instructions and code snippet to add a Pika catalog search box to your library’s webpage.
Table of Contents
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.
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.
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.
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.
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.
Related Documentation
-
Detailed Pika Administrator Roles (Marmot Knowledge Base)
-
NoveList Information (Marmot Knowledge Base)
-
Masquerade Mode (Marmot Knowledge Base)
-
HTML Text Editor (Marmot Knowledge Base)
-
MLN1 Export Fields (Marmot Knowledge Base)
-
Reporting Incorrect Cover Art or Descriptions in Pika (Marmot Knowledge Base)
-
Records Not to Merge/Manual Ungrouping (Marmot Knowledge Base)
-
New York Times Bestsellers Lists (Marmot Knowledge Base)
-
UTF-8 Encoding for Sierra Export Profile for Pika (Marmot Knowledge Base)
-
Preferred Author Grouping (Marmot Knowledge Base)
-
Preferred Grouping Titles (Marmot Knowledge Base)
-
Creating Special Collections (Marmot Knowledge Base)
-
Transferring User Lists (Marmot Knowledge Base)
-
Offline Circulation Process (Marmot Knowledge Base)
-
Google Analytics Basic Instructions (Marmot Knowledge Base)