@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 an autosuggest API path and optional placeholder text for use on the RH Customer Portal.

<cp-search-autocomplete
  path="https://api.example.com/path/to/autosuggest/endpoint"
  client="portal-search">
</cp-search-autocomplete>

Accessibility

This component has full keybaord and screen reader functionality.

Attributes

• path: URL for the portal autosuggest API.
• client: value sent as the redhat_client query parameter.
• 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

Suggestions are requested after the user enters at least two characters.

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 test 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.