Search

The follow specifications detail how the components of a search widget and results page function. These are the building blocks needed to create any search experience for the SAMHSA websites. This specification will be updated with content type and taxonomy once those decisions have been made for SAMHSA’s global search to serve as an example implimentation.

Contents

• Search Widget
• Page Load
• Search Header
• Search Options
• Search Listings
• Filter Accordion
• Small Screen Filter Accordion
• Filter Type: Date Range
• Filter Type: Single Select
• Filter Type: Multi-Select
• Filter Type: Multi-level
• Filter Type: Location
• Pagination
• Printing Styles for Search

Search Control Options

On small screens, the search button is below the input field and fits to fill width of the container.

On medium and larger, the search button to to the right of the input field.

Functionality OnClick/OnTap of button, the search results are shown using the content from the input field. (See OnPage load details)

1- Input	Content – on Default the text reads “Search SAMHSA.gov”. However this text is updated according to the context, For instance on the Resource Template, the text is related to the resource collection.
2- Type ahead	As the user begins to type their query, the system displays possible answers. The user can click an answer and the system will display the taget page
3- Button	Content – on Default the text reads “Search”. However this text is updated according to the context.

Type-a-head Example

Search Page functionality – onLoad

On page load, content is sorted by Latest Published and 15 items are displayed.

There are three types of incoming searches, canned, keyword, empty.

Empty -

• a user submits an empty search (search from with blank input field)

Keyword -

• Any search using the search widget, results are constrained to keyword matches.

Typos and Misspellings

• The system should have a list of common misspellings and would load results against the list.

Canned -

• A canned search is a link created anywhere in the site that contains search filiter criteria. When used, the filter set is contrained by any applied options (keywords and filters). Filters show as buttons in the applied filiters bar and are marked in the filters (however filter accordions stay closed). Keywords show in the search return text.

Search Header

1- Page Title	H1	Content = “Search Results”
2- Search Retured	H4	Content = “Showing results for {Keyword or canned search terms}” Note line does not show on an empty search
3- Applied Filters	Applied filters appear as buttons. OnClick/Tap filter is removed from filter set.

Search Control Options

Sort By

Options:

• Latest Published (Default)
• Most Relevant
• Earliest Published
• Alpha A-Z
• Alpha Z-A On select of sort by, result set is reordered by chosen method.

View

View line shows the total number of results.

View Options:

• 15 (default)
• 50
• 100 On select of view number, system displays the number of items chosen

Search Listings

Functionality

OnClick/OnTap of Listing Title, system displays target link in the current window.

Content Specifications

1- Listing Title | H3 | required | Comes from target Page Title 2- Source | Text | reqired | Shows items source, for instance SAMHSA Publications, SAMHSA Blog, SAMHSA Data 3- Date | Text | required | Shows source date. In most instances this will be the publication date. 4- Summary | Text | reqired | Comes from the target summary field.

Search Accordion

Filters appear in the left rail on large screens sizes and within the Small Screen Filter Accordion. It is reccomended that the filters make use of accodion functionality if there are many on a page. On default page load, the accordion is in a closed state.

Small Screen Filter

Closed State

On Small Screens, the search widget and filters are shown inside a filter accordion.

Open State

Date Range

1- Parent accordion opens to show date range filter.

On Default,

• From date is set to the earliest date of items
• To date is set to current year. This allows all records to be filtered by every date.

On select of either year, result set is filtered to new date range.

Read more about the how the date picker component functions.

Single Select Filter

1- Parent accordion opens to show a radio list. Only one item can be selected. OnSelection filter is applied to result set. OnDeselection or Selection of a different option, result is updated to match applied filter choice.

Note Both the radio and the label are part of the click/touch space.

Multi-Select Filter

1- Parent accordion opens to show children checklist. Multiple options can be chosen. OnSelection filter is applied to result set.

Note Both the checkbox and the label are part of the click/touch space.

Multi-level Filter

1- Parent accordion opens to show children accordions.

2- OnClick/OnTap of Child accordion opens to show items for selection inside, this could be a selection on multi-section list.

A max of 15 items should display, then list is scrollable to view more.

OnSelection of list filter, filter is applied to result set. OnDeselection the filter is removed from the result set.

Location Filter

The location filter uses the multi-level filter compontent. The children accordions are States, Territories, Regions.

States

• Alabama
• Alaska
• Arizona
• Arkansas
• California
• Colorado
• Connecticut
• District of Columbia
• Delaware
• Florida
• Georgia
• Hawaii
• Idaho
• Illinois
• Indiana
• Iowa
• Kansas
• Kentucky
• Louisiana
• Maine
• Maryland
• Massachusetts
• Michigan
• Minnesota
• Mississippi
• Missouri
• Montana
• Nebraska
• Nevada
• New Hampshire
• New Jersey
• New Mexico
• New York
• North Carolina
• North Dakota
• Ohio
• Oklahoma
• Oregon
• Pennsylvania
• Rhode Island
• South Carolina
• South Dakota
• Tennessee
• Texas
• Utah
• Vermont
• Virginia
• Washington
• West Virginia
• Wisconsin
• Wyoming

Territories

• American Samoa
• Federated States of Micronesia
• Guam
• Marshall Islands
• North Marianas Islands
• Palau
• Puerto Rico
• Virgin Islands

Regions

• Region 1 - Boston
• Region 2 - New York
• Region 3 - Philadelphia
• Region 4 - Atlanta
• Region 5 - Chicago
• Region 6 - Dallas
• Region 7 - Kansas City
• Region 8 - Denver
• Region 9 - San Francisco
• Region 10 - Seattle

For more information about HHS Regions please check the website.

Pagination

See: Pagination specification

Printing Search

When priting search pages, it is important to conserve paper and only print the items necessary for the experience. Follow global printing rules and only print the SAMHSA logo in the header and the footer should only include the date printed and page numbers if over one page.

Search functionality does not print. This includes the Search Page title, search options, search widget, and filters.

What Prints:

• The page title is the “Search Return” text. This is set to 24px.
• List items in view
  • List title is 18px
  • List content (Source, Date, Summary) is 12px

View Full Page Designs