Add a pass-through search box to Vega

You can create a custom search box that integrates with your library website. You could do this to give patrons the option to search multiple places in addition to the library catalog, such as the library website, databases, or archives. Also, you have complete freedom over the design of the search mechanism.

To add a pass-through search box, include the code provided here on an appropriate webpage. You can use either pure HTML or pure JavaScript.

When you customize the script for your use, substitute the following value with your system setting:

Value Description
<FQDN>

The fully-qualified domain name for your Vega site. This value can be found in your catalog URL. For example, in https://acpl.na4.iiivega.com/, the <FQDN> is acpl. This value is required.

 

Pure HTML

<!-- REQUIRED INPUT <FQDN> fully qualified domain name to Vega site -->
<form action="https://<FQDN>/search">
  <input placeholder="What are you looking for?" name="query">
  <select name="searchType">
    <option value="everything">Everything</option>
    <option value="agent">Author</option>
    <option value="concept">Concept</option>
    <option value="series">Series</option>		
    <option value="title">Title</option>
  </select>
  <input type="hidden" name="pageSize" value="10">
  <input type="submit" value="Search">
</form>

 

Pure JavaScript 

<!-- REQUIRED INPUT <FQDN> fully qualified domain name to Vega site -->
<div id="vega-search-box" data-url="https://<FQDN>"></div>
<script type="text/javascript">
  var searchBox = document.getElementById('vega-search-box');
  var endpoint = searchBox.getAttribute('data-url') + '/search';
  var options = [
    {
      value: 'everything',
      label: 'Everything'
    },
    {
      value: 'agent',
      label: 'Author'
    },
    {
      value: 'concept',
      label: 'Concept'
    },
    {
      value: 'title',
      label: 'Title'
    }
  ];
  var pageSize = 10;
 
  function createOption(value, label) {
    var option = document.createElement('option');
    option.setAttribute('value', value);
    option.innerHTML = label;
    return option;
  }
 
  var form = document.createElement('form');
  form.setAttribute('action', endpoint);
  searchBox.appendChild(form);
 
  var search = document.createElement('input');
  search.setAttribute('placeholder', 'What are you looking for?');
  search.setAttribute('name', 'query');
  form.appendChild(search);
 
  var type = document.createElement('select');
  type.setAttribute('name', 'searchType');
  form.appendChild(type);
 
  var pageSizeInput = document.createElement('input');
  pageSizeInput.setAttribute('type', 'hidden');
  pageSizeInput.setAttribute('name', 'pageSize');
  pageSizeInput.setAttribute('value', pageSize);
  form.appendChild(pageSizeInput);
 
  options.forEach(function (option) {
    type.appendChild(createOption(option.value, option.label));
  });
 
  var submit = document.createElement('input');
  submit.setAttribute('type', 'submit');
  submit.setAttribute('value', 'search');
  form.appendChild(submit);
</script>