====== 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 [[https://github.com/vufind-org/vufind/blob/dev/themes/bootstrap3/templates/search/advanced/layout.phtml|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 [[https://github.com/vufind-org/vufind/blob/dev/themes/bootstrap3/templates/eds/advanced.phtml|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>
          <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>

==== 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>
        <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>