Pika - Add a Pika Search Box to Your Webpage

Add a Pika Search Box to Your Webpage

• To create a search box, embed the following code in the appropriate place on your webpage. Change the URL to your appropriate Pika URL, keeping the "/Union/Search".  
• If your site has a stylesheet, it is recommended to take the styling rules from the <style> tag and add them to your site stylesheet. However this is not required.
• Modify styling and html to fit your needs.
• Note: the "target" attribute of the <form> tag will cause the search to be loaded 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.

​Copy all of this code, but change https://opac.marmot.org/Union/Search to your library 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>

HTML will look like this (except for this page's styling on the text box) :

Add a Pika searchbox module to your Drupal 7 site

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

Add a 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>

HTML will look like this (except for this page's styling on the text box) :