Search Widget

Used to create and display search forms and the subsequent results. This should always be used for search functionality in a publication due to the efficiency of the underlying implementation and consistency of display.

Creation

The search widget is defined with E as the Exchange object and a spec. The spec can have the following properties:

formOnly Denotes if the search widget is just for to be used for rendering the form and the search will be handled elsewhere
alwaysSearch Always runs a query even if the search bar is empty
hideRelevanceSort Used to hide the relevance sort order for a search
pageSize The number of results to display on a single page, defaults to 20
modifyQuery A function(query) to modify the query prior to its execution

Example usage:

P.webPublication.widget.search(E, {
    alwaysSearch: true,
    hideRelevanceSort: true,
    hideResultsCount: true,
    pageSize: 40,
    modifyQuery(query) {
        query.
            // Restrict search to specifically labelled public items
            anyLabel([Label.PublicItem]);
    }
});

Templating

property form

deferredRender for the default search bar and submit button. This ensures that the form is consistent in display and implementation across publications. Often used in conjunction with results (below) in order to create a search page.

property results

deferredRender for the page around the search results, displaying the number of results, filters and next/prev arrows. The actual result display is rendered based on the searchResultRendererForTypes.

Example search page template:


pageTitle("Search")

std:web-publisher:block("pageheaderSubtitle") {
  "Explore our publication"
}

std:web-publisher:block("pageheaderExtra") {
  <div class="haplo-search-form">
    render(search.form)
  </div>
}

std:web-publisher:block("below") {
  <div class="search-results">
      render(search.results)
  </div>
}

property ui

deferredRender for displaying the form and results together, useful as a default implementation however rendering form and results separately allows for more flexibility in display.

Example search page template using ui:


pageTitle("Search")

std:web-publisher:block("pageheaderSubtitle") {
  "Explore our internationally renowned publication"
}

std:web-publisher:block("below") {
  render(search.ui)
}