Search Bar

Installation

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN

<script src="https://unpkg.com/@pearson-ux/search-bar"></script>

NPM

npm i @pearson-ux/search-bar --save

Demo

    <pearson-search-bar placeholder="Type a search term here"></pearson-search-bar>

Structure

Follow these steps to successfully build out a search bar component. Start by adding a <pearson-search-bar> element.

<pearson-search-bar></pearson-search-bar>

To include a search options menu add a <ul> element with a class of search-options as a child of the <pearson-search-bar> element.

<pearson-search-bar>
    <ul class="search-options">

    </ul>
</pearson-search-bar>

For each option you want to appear as search criteria, add an <li> element.

<pearson-search-bar>
    <ul class="search-options">
        <li>first option</li>
        <li>second option</li>
        <li>third option</li>
    </ul>
</pearson-search-bar>

To include additional filters add a <ul> with a class of filter-options.

<pearson-search-bar>
    <ul class="search-options">
        <li>first option</li>
        <li>second option</li>
        <li>third option</li>
    </ul>
    <ul class="filter-options">
        
    </ul>
</pearson-search-bar>

For each filter option you want to appear, add an <li> element.

<pearson-search-bar>
    <ul slot="search-options">
        <li>first option</li>
        <li>second option</li>
        <li>third option</li>
    </ul>
    <search-bar-filter slot="filter">
        <li>filter one</li>
        <li>filter two</li>
        <li>filter three</li>
    </search-bar-filter>
</pearson-search-bar>

API

Optional

All attributes in this API are optional.

Attribute	Type	Default	Description
placeholder	string	unset	Adds placeholder text to the input.
startdisabled	boolean	false	Determines whether the input will start as disabled until a search parameter is selected from the drop down.
error	string	unset	Adds error styling and warning message.
collapsed	String	unset	This attribute can be set to trigger responsive behavior.

Events

The pearson-search-bar component emits one event:

Event	Description
search	Will fire when the search button is clicked.

const searchBar = document.querySelector('pearson-search-bar')
searchBar.addEventListener('search', function(event) {
  console.log(searchBar.value)
})

Forms can be tricky, so here is some guidance around how to implement accessibility successfully.