Warning: This page has not been updated in over over a year and may be outdated or deprecated.
development:architecture:advanced_search_templates
Table of Contents
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.
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: </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>
development/architecture/advanced_search_templates.txt · Last modified: 2023/11/09 20:55 by demiankatz