paper-autocomplete

v3.0.0

Published

3 years ago

Custom Autocomplete, used to select 1 element of an array, or one item from a data source

Downloads

0High
0Medium
0Low

zerman2894

Paper Autocomplete

Premise: This repo has been forked from OLD polymer element, writing in polymer 1.
I updated to polymer 3, now this web-component it's compabile only with Polymer 3.0.
I'm so sorry but there aren't fork in my project from the original repo.
This is the source Repo

<paper-autocomplete></paper-autocomplete> used to select one element of an array or from a data source.

See: Documentation, Demo.

Usage

Installation

npm install --save paper-autocomplete

In an html file

<html>
  <head>
    <script type="module" src="paper-autocomplete/paper-autocomplete.js"></script>
  </head>
  <body>
    <paper-autocomplete label="Search Something" source={{array}}></paper-autocomplete>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import 'paper-autocomplete/paper-autocomplete';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-autocomplete label="Search Something" source={{array}}></paper-autocomplete>
    `;
  }
}
customElements.define('sample-element', SampleElement);

For Developers

Demo and Docs

Custome Style, from outside

Find some test on the various demo file.

--paper-autocomplete-main-color: Color for autocomplete details (border & icons).
--paper-input-font-color: Font color only for input value.
--paper-suggestions-color: Font color for item suggestions.
--suggestions-item-min-height: Min heigth for item suggestions.
--paper-autocomplete-min-height: Min heigth for the autocomplete, that wrap also the suggestions.

Testing & Demo

First step clone repo & install dependencies:

git clone https://github.com/EmanueleDessi/paper-autocomplete.git
cd paper-autocomplete
npm install

To run test whit polymer use:

npm run test //Test for all installed browser in your pc
npm run test-safari //Test only for safari browser

If you have the problem with polymer test, try this (I use this method):

open the serve with polymer serve;

npm run serve

run debbuger with vscode or open demo path in your localhost by terminal;

open http://localhost:8081/components/paper-autocomplete/test/paper-autocomplete-test.html

Difference Usage between VScode and not

With VScode you see the result and log in the DEBUG CONSOLE.
Without VScode you must use the Inspect Element of your default Browser.
If will you use VScode, remember, you must config the debbuger in .vscode folder.
(my .vscode folder is ignored by gitignore)

To run demo

npm run serve

TODO