@cpelements/cp-search-autocomplete

PatternFly Element | Cp search autocomplete element

Usage

cp-search-autocomplete is a wrapper for pfe-autocomplete that enables users to specify a path and optional placeholder text for use on the RH Customer Portal.

<cp-search-autocomplete path="/some/path/data.json"></cp-search-autocomplete>

Accessibility

This component has full keybaord and screen reader functionality.

Attributes

• path: a url for the autocomplete functionality to reference and display potential matches.
• placeholder: optionally override the default placeholder text
• query: set the default value for the input field in pfe-autocomplete
• num-items: change the default number of items (5) in the dropdown for pfe-autocomplete

Dependencies

@patternfly/pfe-autocomplete

Dev

`npm start`

Test

`npm run test cp-search-autocomplete -- -p`

the -p flag means it will persist, simply refresh the test in the browser window to use in development

Build

`npm run build`

Demo

From the PFElements root directory, run:

`npm run demo`

the demo page will launch with a table of contents to view each element. the css can take a while to build, so you may need to refresh the elements page after clicking on it.

Code style

Cp search autocomplete (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.