Advanced Search Templates

VuFind® uses script templates to simplify the 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.

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

• 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

<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>
        <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>
      </div>
    </div>
    <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>
      </select>
    </div>
  </div>
</div>

• 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”

<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>
      <div class="col-sm-4 middle">
        <select class="type form-control" name="type0[]">
          <option value="AllFields">All Fields</option>
          ...
          <option value="Title">Title</option>
        </select>
      </div>
      <div class="col-sm-1 close hidden">
        <a class="help-block" href="#">×</a>
      </div>
    </div>
  </div>
</div>