@advanced-rest-client/paper-autocomplete
Advanced tools
Paper autocomplete element to be used with paper-, iron- and regular inputs.
Use paper-autocomplete to add autocomplete functionality to the input elements.
It also works wilt polymer inputs.
The element works with static list of suggestions or with dynamic (asynchronous)
operation that require calling te backend or local datastore.
In second case you should set loader property which will display a loader animation
while results are loaded.
You must associate suggestions with the input field. This can be done by passing
an element reference to the target property.
<paper-input label="Enter fruit name" id="fruits"></paper-input>
<paper-autocomplete id="fruitsSuggestions"></paper-autocomplete>
const ac = document.getElementById('fruitsSuggestions');
ac.target = document.getElementById('fruits');
ac.source = ['Apple', 'Orange', 'Bananas'];
or defined in an attribute:
<paper-autocomplete source='["Apple", "Orange", "Bananas"]'></paper-autocomplete>
<paper-input-container>
<label>Enter friut name</label>
<iron-input slot="input">
<input id="asyncField">
</iron-input>
</paper-input-container>
<paper-autocomplete loader id="fruitAsync" on-query="_asyncSuggestions"></paper-autocomplete>
const ac = document.querySelector('#fruitAsync');
ac.target = document.querySelector('#asyncField');
ac.addEventListener('query', (e) => {
const query = e.detail.value;
// some function go get results.
asyncQuery(query, (suggestions) => {
e.target.source = suggestions;
});
});
This components is a part of API components ecosystem
npm install --save @advanced-rest-client/paper-autocomplete
<html>
<head>
<script type="module">
import './node_modules/@advanced-rest-client/paper-autocomplete/paper-autocomplete.js';
</script>
</head>
<body>
<paper-autocomplete></paper-autocomplete>
</body>
</html>
import {PolymerElement, html} from './node_modules/@polymer/polymer/polymer-element.js';
import './node_modules/@advanced-rest-client/paper-autocomplete/paper-autocomplete.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
<paper-autocomplete></paper-autocomplete>
`;
}
}
customElements.define('sample-element', SampleElement);
git clone https://github.com/advanced-rest-client/paper-autocomplete
cd api-url-editor
npm install
npm install -g polymer-cli
polymer serve --npm
open http://127.0.0.1:<port>/demo/
polymer test --npm
Suggestions array can be either an array of strings or objects. For strings, displayed in the list and inserted to the input field value is the same item.
You can set different list item display value and value inserted into the field when the array contains
onject. Each object must contain value and display properties where value property
will be inserted into the text field and display will be used to display description inside the list.
The query event is fired when the user query change in the way so the element is
not able to render suggestions properly.
This means if the user add a letter to previously entered value the query event will not
fire since it already have list of suggestion that should be used to filter suggestions from.
And again when the user will delete a letter the element will still have list of
source suggestions to filter suggestions from.
However, if the user change the query entirely it will fire query event
and the app will expect to source to change. Setting source is not mandatory.
To prevent the element to update the value of the target input, listent for
selected event and cancel it by calling event.preventDefault() function.
FAQs
Paper autocomplete element to be used with paper-, iron- and regular inputs.
The npm package @advanced-rest-client/paper-autocomplete receives a total of 5 weekly downloads. As such, @advanced-rest-client/paper-autocomplete popularity was classified as not popular.
We found that @advanced-rest-client/paper-autocomplete demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.