Primo VE Search Widgets

Primo VE can be added to websites through a simple html form and short bit of JavaScript. More information can be found at Primo VE Customization - Best Practices.

Example 4: Multiple Search Forms

The demonstration below shows a method for including more than one Primo VE search form on a page. Each form and corresponding JavaScript function is unique. Another method would be code changes to the search form based on user selection of elements on the page.

Both methods will translate regardless of how the search forms are displayed. In this example, I show the popular tabbed search widget. The method of creating the tabbed structure will depend on the framework the host page is built on. The implementation of the tabbed interface is built on Bootstrap, and is not covered in the example code.

Tab Widget

Altering the JavaScript and HTML

Each JavaScript function and corresponding HTML form should be altered so that they have unique values from the other forms. The code examples show the modifications for a single form. Each form will need unique values.

JavaScript

<script type="text/javascript">
     function searchPrimoA() {
          document.getElementById("primoQueryA").value = "any,contains," + document.getElementById("primoQueryTempA").value.replace(/[,]/g, " ");
          document.forms["searchFormA"].submit();
     }
</script>
                

Unique values
• searchPrimoA()
• primoQueryA
• primoQueryTempA
• searchFormA

HTML

Match changes to the HTML form with the unique values you selected for your JavaScript function.

Note that there are five places to modify in the HTML form. One of the unique values appears twice.

<form id="simple" name="searchFormA" method="get" target="_self" action="https://mnpals-mct.primo.exlibrisgroup.com/discovery/search" 
enctype="application/x-www-form-urlencoded; charset=utf-8" onsubmit="searchPrimoA()">
     <!-- Customizable Parameters -->
     <input type="hidden" name="vid" value="01MNPALS_MCT:MCT">
     <input type="hidden" name="tab" value="Everything">
     <input type="hidden" name="search_scope" value="MyInst_and_CI">
     <input type="hidden" name="mode" value="basic">
     <!-- Fixed parameters -->
     <input type="hidden" name="displayMode" value="full">
     <input type="hidden" name="bulkSize" value="10">
     <input type="hidden" name="highlight" value="true">
     <input type="hidden" name="dum" value="true">
     <input type="hidden" name="query" id="primoQueryA">
     <input type="hidden" name="displayField" value="all">
     <!-- Enable this if "Expand My Results" is enabled by default in Views Wizard -->
     <input type="hidden" name="pcAvailabiltyMode" value="true">
     <input type="text" id="primoQueryTempA" value="" size="35">
     <!-- Search Button -->
     <input id="go" title="Search" onclick="searchPrimoA()" type="button" value="Search" alt="Search">
</form>