@cpelements/cp-search-autocomplete

0.0.9 • Public • Published

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.

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @cpelements/cp-search-autocomplete

    Weekly Downloads

    26

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    53.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • asacolips
    • cgatyas
    • arakumar
    • diwanshipandey
    • eyevana
    • bexter89
    • dfaucette
    • fwang830
    • rlahoda
    • tylermart10
    • kylebuch8
    • kelss
    • wesruv
    • jordanpagewhite