@ppci/source-autocomplete
v1.5.8
Published
<ol> <li> <a href="#installation">Installation</a> </li> <li> <a href="#usage">Usage</a> </li> <li> <a href="#styling">Styling</a> </li> <li> <a href="#properties">Properties</a> </li> <li> <a href="#events">Events<
Downloads
27
Keywords
Readme
Source Search Autocomplete
Table of contents
Installation
NPM
npm i @ppci/source-autocomplete
// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjsUsage
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;
}