About Features Downloads Getting Started Documentation Events Support GitHub

Site Tools

Warning: This page has not been updated in over over a year and may be outdated or deprecated.

Advanced Search Templates

As of 2.4.1 we are using script templates in VuFind to simplify advanced search interface Javascript and customization. There are two templates: a group template and a search input template.

You can find the default templates in the search/advanced/layout template. They're placed in the #new_group_template and the #new_search_template elements.

To overwrite with a custom template, look at the eds/advanced template for an example.

Javascript Requirements

The required elements for the default Javascript to work are as follows:

New Group Template

  • Needs an id of new_group_template
  • An element with the class “search_place_holder”. New search inputs will be inserted above this element.
  • A link/button with the class “add_search_link”. addSearch will be added as an event.
  • A close link with the class “group-close”
  • Select with class “form-control” will determine match
  • Label with a class “search_bool” to be a label for the match select if you want

Default Group Template

<div id="new_group_template" class="hidden">
  <div class="group row">
    <a href="#" class="group-close hidden" title="Remove Search Group">×</a>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-3">
          <label class="help-block">Search for:</label>
        <div class="col-sm-9">
          <i class="fa fa-plus-circle search_place_holder hidden"></i>
          <a href="#" class="add_search_link hidden">Add Search Field</a>
    <div class="col-sm-3 match">
      <label class="search_bool">Match:&nbsp;</label>
      <select name="bool0[]" id="search_bool0" class="form-control">
        <option value="AND">ALL Terms</option>
        <option value="OR">ANY Terms</option>
        <option value="NOT">NO Terms</option>

New Search Template

  • Needs an id of “new_search_template”
  • Text inputs need a “form-control” class
  • Search type select element needs a “type” class
  • A close element: div/span.close with an anchor inside
  • Any operator select elements need a class of “op”

Default Search Template

<div id="new_search_template" class="hidden">
  <div class="search">
    <div class="row">
      <div class="col-sm-7 left">
        <input class="form-control" type="text">
      <div class="col-sm-4 middle">
        <select class="type form-control" name="type0[]">
          <option value="AllFields">All Fields</option>
          <option value="Title">Title</option>
      <div class="col-sm-1 close hidden">
        <a class="help-block" href="#">×</a>
development/architecture/advanced_search_templates.txt · Last modified: 2015/12/14 18:27 by demiankatz