Search Bar
#
InstallationFor 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>
#
NPMnpm i @pearson-ux/search-bar --save
#
Demo <pearson-search-bar placeholder="Type a search term here"></pearson-search-bar>
#
StructureFollow 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#
OptionalAll 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. |
#
EventsThe 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)})