@ppci/source-autocomplete

Source Search Autocomplete

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties
5. Events

Installation

NPM

npm i @ppci/source-autocomplete

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/source-autocomplete'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/source-autocomplete/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/source-autocomplete/builds/legacy.min.js" />

<!-- Component -->
<source-autocomplete
  .suggestions=${Array}
  @suggestion-click=${Function}
  @search-change=${Function}>
</source-autocomplete>

Styling

source-autocomplete {
  /* Searchbox */
  --input-padding: 8px 16px;
  --input-border: 1px solid #eeee;
  --input-border-radius: 8px;
  --input-color: gray;
  --input-background: white;
  --input-placeholder-color: gray;
  --input-focus-border: 1px solid blue;
}

Properties

Property	Type	Description	Possible Values
*searchPlaceHolder*	String	Searchbox placeholder text
suggestions	Array	Array of source suggestions	```javascript [ { id: "ed34e97a-c29b-52bd-3fb0-040260ac16d6", name: "Ibiza plaza", city: "Naaldwijk", image: "imageurl.nl/image.jpg" }, { id: "a5b0fe5c-990d-0c86-c03c-7655de478f74", name: "solaradam", city: "Amsterdam", image: "imageurl.nl/image.jpg" } ] ```

Events

Name	Description	Payload
@suggestion-click	Suggestion item clicked	```javascript { detail: { id: "a5b0fe5c-990d-0c86-c03c-7655de478f74", name: "solaradam", city: "Amsterdam", image: "imageurl.nl/image.jpg" } } ```
@search-change	Search value has changed	```javascript { detail: { value: 'p' } } ```