dile-select-ajax
This component has the hability to search in a configurable JSON API resource to show the options returned by that resource on the <select> element.
The component make automatic server calls using Ajax to the URL configured by the endpoint attribute.
Installation
To install dile-select-ajax component you have to install @dile/dile-select package.
npm i @dile/dile-select
dile-select Usage
Import the component.
import '@dile/dile-select/dile-select-ajax.js';
Use the component.
<dile-select-ajax
id="select1"
name="post_id"
label="Post"
displayProperty="title"
endpoint="https://jsonplaceholder.typicode.com/posts"
delay="500"
></dile-select-ajax>
Properties
This component is not documented yet.
Methods
Not documented
Events
- element-changed: This component implements DileEmmitChangeMixin, so element-changed is fired when the value property of the component changes.
dile-select-ajax demo
class MyComponent extends LitElement {
static get styles() {
return css`
:host {
position: relative;
}
dile-select-ajax {
z-index: 1;
}
`
}
render() {
return html`
<dile-select-ajax
id="select1"
name="post_id"
label="Post"
displayProperty="title"
endpoint="https://jsonplaceholder.typicode.com/posts"
delay="500"
></dile-select-ajax>
<p id="msg1">Select a value</p>
<p style="font-size: 0.875rem;">Note that the API we are use in this example (jsonplaceholder) does not accept filtering on like operator, so you will always recive all dataset on searches.</p>
`
}
firstUpdated() {
this.shadowRoot.getElementById('select1').addEventListener('element-changed', (e) => {
let textElement = this.shadowRoot.getElementById('msg1');
textElement.innerText = "The value selected is: " + e.detail.value;
});
}
}
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;