Skip to main content

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.

AttributeTypeDefaultDescription
placeholderstringunsetAdds placeholder text to the input.
startdisabledbooleanfalseDetermines whether the input will start as disabled until a search parameter is selected from the drop down.
errorstringunsetAdds error styling and warning message.
collapsedStringunsetThis attribute can be set to trigger responsive behavior.

Events#

The pearson-search-bar component emits one event:

EventDescription
searchWill 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.