Autocomplete
<gstock-autocomplete>
|
GstockAutocomplete
Examples
Propiedades
Tamaño
Utilice el atributo de size para cambiar el tamaño del componente.
<gstock-autocomplete size="small" placeholder="Small">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<gstock-autocomplete size="medium" placeholder="Medium">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<gstock-autocomplete size="large" placeholder="Large">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>Marcador de posición
Utilice el atributo placeholder para agregar un marcador de posición.
<gstock-autocomplete placeholder="This is a placeholder...">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>Estados
Deshabilitado
Utilice el atributo disabled para deshabilitar el componente.
<gstock-autocomplete placeholder="This autocomplete is disabled" disabled>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>Solo lectura
Utilice el atributo readonly para permitir leer el valor y no modificarlo.
<gstock-autocomplete readonly value="option-2">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>Etiqueta y texto de ayuda
Utilice el atributo label y help-text para añadir una etiqueta y texto de ayuda al componente y sea más accesible.
<gstock-autocomplete label="Label:" help-text="This is a test help-text.">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>Para utilizar HTML personalizado en las etiquetas y textos de ayuda, utilice los slots label y help-text.
<gstock-autocomplete>
<label slot="label" class="autocomplete-custom-label">
<gstock-icon name="edit" size="small"></gstock-icon>
Custom label:
</label>
<span slot="help-text">
Custom help-text with a
<a href="#label-and-help-text">link</a>
.
</span>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<style>
.autocomplete-custom-label {
display: inline-flex;
gap: 4px;
}
</style>Borrar contenido
Utilice el atributo clearable para agregar un botón de limpiar cuando el autocomplete tenga contenido.
<gstock-autocomplete value="option-1" clearable>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>Prefijo y sufijo
Utilice los atributos prefix y suffix para agregar iconos.
<gstock-autocomplete placeholder="Small" size="small" prefix="search" suffix="star" class="autocomplete-prefix-suffix">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<gstock-autocomplete placeholder="Medium" size="medium" prefix="search" suffix="star" class="autocomplete-prefix-suffix">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<gstock-autocomplete placeholder="Large" size="large" prefix="search" suffix="star" class="autocomplete-prefix-suffix">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<style>
.autocomplete-prefix-suffix {
margin-bottom: 1rem;
}
</style>Para prefijos y sufijos personalizados con HTML, utilice los slots prefix y suffix.
<gstock-autocomplete placeholder="Small" size="small" class="autocomplete-prefix-suffix-custom">
<gstock-icon name="search" slot="prefix"></gstock-icon>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<gstock-autocomplete placeholder="Medium" size="medium" class="autocomplete-prefix-suffix-custom">
<gstock-icon name="search" slot="prefix"></gstock-icon>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<gstock-autocomplete placeholder="Large" size="large" class="autocomplete-prefix-suffix-custom">
<gstock-icon name="search" slot="prefix"></gstock-icon>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<style>
.autocomplete-prefix-suffix-custom {
margin-bottom: 1rem;
}
</style>Agrupación
Utilice gstock-group-label y gstock-divider para organizar las opciones en secciones.
<gstock-autocomplete>
<gstock-group-label>Section 1</gstock-group-label>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
<gstock-divider></gstock-divider>
<gstock-group-label>Section 2</gstock-group-label>
<gstock-option value="option-4">Option 4</gstock-option>
<gstock-option value="option-5">Option 5</gstock-option>
<gstock-option value="option-6">Option 6</gstock-option>
</gstock-autocomplete>Selección múltiple
Utilice el atributo multiple para permitir la selección de varias opciones a la vez.
<gstock-autocomplete label="Select multiple options:" value="option-1 option-2" multiple clearable>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
<gstock-option value="option-4">Option 4</gstock-option>
<gstock-option value="option-5">Option 5</gstock-option>
<gstock-option value="option-6">Option 6</gstock-option>
<gstock-option value="option-7">Option 7</gstock-option>
</gstock-autocomplete>
<br>
<gstock-autocomplete label="Disabled multiple options:" value="option-1 option-2" multiple disabled>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
<gstock-option value="option-4">Option 4</gstock-option>
<gstock-option value="option-5">Option 5</gstock-option>
<gstock-option value="option-6">Option 6</gstock-option>
<gstock-option value="option-7">Option 7</gstock-option>
</gstock-autocomplete>Posicionamiento
Utilice el atributo placement para controlar la posición del listbox del autocomplete. Las posiciones permitidas son top y bottom.
<gstock-autocomplete placement="top" placeholder="Top placement set in autocomplete listbox">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>Filtrable
Utilice el atributo filterable para filtrar opciones mientras escribe.
<gstock-autocomplete clearable filterable label="Color" placeholder="Filter color...">
<gstock-option value="red">Red</gstock-option>
<gstock-option value="orange">Orange</gstock-option>
<gstock-option value="yellow">Yellow</gstock-option>
<gstock-option value="green">Green</gstock-option>
<gstock-option value="blue">Blue</gstock-option>
<gstock-option value="indigo">Indigo</gstock-option>
<gstock-option value="violet">Violet</gstock-option>
<gstock-option value="black">Black</gstock-option>
<gstock-option value="white">White</gstock-option>
<gstock-option value="gray">Gray</gstock-option>
<gstock-option value="magenta">Magenta</gstock-option>
<gstock-option value="cyan">Cyan</gstock-option>
<gstock-option value="magenta">Magenta</gstock-option>
<gstock-option value="lime">Lime</gstock-option>
<gstock-option value="teal">Teal</gstock-option>
<gstock-option value="purple">Purple</gstock-option>
<gstock-option value="maroon">Maroon</gstock-option>
<gstock-option value="navy">Navy</gstock-option>
<gstock-option value="olive">Olive</gstock-option>
<gstock-option value="silver">Silver</gstock-option>
<gstock-option value="gold">Gold</gstock-option>
<gstock-option value="brown">Brown</gstock-option>
</gstock-autocomplete>Sin resultados
Por defecto, se muestra un mensaje cuando no se encuentran resultados.
<gstock-autocomplete clearable label="Color" placeholder="Select a color..."></gstock-autocomplete>
<gstock-autocomplete clearable filterable label="Color" placeholder="Filter color..."></gstock-autocomplete>Utilice el slot not-found para personalizar el mensaje informativo cuando no se encuentren resultados.
<gstock-autocomplete clearable filterable label="Color" placeholder="Filter color...">
<div class="not-found" slot="not-found">
<gstock-icon name="alert-triangle"></gstock-icon>
Custom Not Found Results!
</div>
</gstock-autocomplete>
<style>
.not-found {
padding: var(--gstock-legacy-spacing-2) var(--gstock-legacy-spacing-3);
gap: var(--gstock-legacy-spacing-3);
display: inline-flex;
align-items: center;
}
</style>Estado de carga
Utilice el atributo loading para mostrar un indicador de carga cuando el autocomplete está procesando datos de forma asíncrona.
<gstock-autocomplete loading placeholder="Loading options...">
<gstock-option value="1">Option 1</gstock-option>
<gstock-option value="2">Option 2</gstock-option>
<gstock-option value="3">Option 3</gstock-option>
</gstock-autocomplete>Puede personalizar el icono de carga utilizando el slot loading.
<gstock-autocomplete loading>
<gstock-animation slot="loading" animation="rotateOut" play>
<gstock-icon name="loader"></gstock-icon>
</gstock-animation>
<gstock-option value="1">Option 1</gstock-option>
<gstock-option value="2">Option 2</gstock-option>
<gstock-option value="3">Option 3</gstock-option>
</gstock-autocomplete>Carga asíncrona de opciones
Combine el atributo loading con opciones dinámicas para indicar al usuario que se están cargando resultados.
-
Value:
-
Display Label:
-
Status:
<gstock-autocomplete clearable filterable label="Dog Breed" placeholder="Search dog breed..."></gstock-autocomplete>
<ul class="output">
<li>
<span class="output__key">Value:</span>
<code class="output__value value"></code>
</li>
<li>
<span class="output__key">Display Label:</span>
<code class="output__value display-label"></code>
</li>
<li>
<span class="output__key">Status:</span>
<code class="output__value status"></code>
</li>
</ul>
<script type="module">
const autocomplete = document.querySelector('gstock-autocomplete');
const value = document.querySelector('.output__value.value');
const displayLabel = document.querySelector('.output__value.display-label');
const status = document.querySelector('.output__value.status');
let searchTimeout;
const search = query => {
// Clear previous timeout
clearTimeout(searchTimeout);
// Clear existing options
while (autocomplete.firstChild) {
autocomplete.removeChild(autocomplete.firstChild);
}
if (!query || !query.length) {
autocomplete.loading = false;
status.innerText = 'No query';
return;
}
// Show loading state
autocomplete.loading = true;
status.innerText = 'Loading...';
// Debounce search
searchTimeout = setTimeout(() => {
let url = 'https://api.thedogapi.com/v1/breeds/search';
if (query) {
url += `?q=${query}`;
}
autocomplete.helpText = '';
fetch(url, { method: 'GET' })
.then(response => response.json())
.then(json => {
json?.forEach(dog => {
const option = document.createElement('gstock-option');
option.value = dog.id;
option.innerText = `${dog.name} (#${dog.id})`;
autocomplete.appendChild(option);
});
// Hide loading state
autocomplete.loading = false;
status.innerText = `Found ${json.length} results`;
})
.catch(error => {
autocomplete.helpText = `Error: ${error.message}`;
autocomplete.loading = false;
status.innerText = 'Error';
});
}, 300);
};
await Promise.all([customElements.whenDefined('gstock-autocomplete')]).then(() => {
value.innerText = autocomplete.value;
displayLabel.innerText = autocomplete.displayInput.value;
status.innerText = 'Ready';
autocomplete.addEventListener('gstock-input-event', event => {
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayInput.value;
search(target.displayInput.value);
});
});
</script>Opciones dinámicas
Utilice el evento gstock-input-event para manejar opciones de forma dinámica.
-
Value:
-
Display Label:
<gstock-autocomplete clearable label="Dog Breed" placeholder="Search dog breed..."></gstock-autocomplete>
<ul class="output">
<li>
<span class="output__key">Value:</span>
<code class="output__value value"></code>
</li>
<li>
<span class="output__key">Display Label:</span>
<code class="output__value display-label"></code>
</li>
</ul>
<script type="module">
const autocomplete = document.querySelector('gstock-autocomplete');
const value = document.querySelector('.output__value.value');
const displayLabel = document.querySelector('.output__value.display-label');
const search = query => {
while (autocomplete.firstChild) {
autocomplete.removeChild(autocomplete.firstChild);
}
if (!query || !query.length) {
return;
}
let url = 'https://api.thedogapi.com/v1/breeds/search';
if (query) {
url += `?q=${query}`;
}
autocomplete.helpText = '';
fetch(url, { method: 'GET' })
.then(response => response.json())
.then(json => {
json?.forEach(dog => {
const option = document.createElement('gstock-option');
option.value = dog.id;
option.innerText = `${dog.name} (#${dog.id})`;
autocomplete.appendChild(option);
});
})
.catch(error => {
autocomplete.helpText = `Error: ${error.message}`;
});
};
await Promise.all([customElements.whenDefined('gstock-autocomplete')]).then(() => {
value.innerText = autocomplete.value;
displayLabel.innerText = autocomplete.displayInput.value;
search();
autocomplete.addEventListener('gstock-input-event', event => {
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayInput.value;
search(target.displayInput.value);
});
});
</script>Eventos
Cambio de valor
Utilice el evento gstock-change-event para observar cuando el valor ha cambiado. Para emitir este evento, seleccione una opción de la lista.
-
Value:
-
Display Label:
<gstock-autocomplete label="Change Event">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<ul class="output">
<li>
<span class="output__key">Value:</span>
<code class="output__value value"></code>
</li>
<li>
<span class="output__key">Display Label:</span>
<code class="output__value display-label"></code>
</li>
</ul>
<script type="module">
const autocomplete = document.querySelector('gstock-autocomplete');
const value = document.querySelector('.output__value.value');
const displayLabel = document.querySelector('.output__value.display-label');
await Promise.all([customElements.whenDefined('gstock-autocomplete')]).then(() => {
value.innerText = autocomplete.value;
displayLabel.innerText = autocomplete.displayInput.value;
autocomplete.addEventListener('gstock-change-event', event => {
console.info('Emitted event', event);
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayInput.value;
});
});
</script>Limpiar valor
Utilice el evento gstock-clear-event para observar cuando el valor se ha limpiado. Para emitir este evento, habilite el atributo clearable y presione el botón de limpiar cuando el valor no esté vacío.
-
Value:
-
Display Label:
<gstock-autocomplete label="Clear Event" value="option-2" clearable>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<ul class="output">
<li>
<span class="output__key">Value:</span>
<code class="output__value value"></code>
</li>
<li>
<span class="output__key">Display Label:</span>
<code class="output__value display-label"></code>
</li>
</ul>
<script type="module">
const autocomplete = document.querySelector('gstock-autocomplete');
const value = document.querySelector('.output__value.value');
const displayLabel = document.querySelector('.output__value.display-label');
await Promise.all([customElements.whenDefined('gstock-autocomplete')]).then(() => {
value.innerText = autocomplete.value;
displayLabel.innerText = autocomplete.displayInput.value;
autocomplete.addEventListener('gstock-clear-event', event => {
console.info('Emitted event', event);
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayInput.value;
});
autocomplete.addEventListener('gstock-change-event', event => {
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayInput.value;
});
});
</script>Entrada de texto
Utilice el evento gstock-input-event para observar cuando el valor se ha filtrado. Para emitir este evento, habilite el atributo filterable e ingrese texto; el evento se emitirá cada vez que el texto cambie.
-
Value:
-
Display Label:
<gstock-autocomplete label="Filter Event" filterable>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<ul class="output">
<li>
<span class="output__key">Value:</span>
<code class="output__value value"></code>
</li>
<li>
<span class="output__key">Display Label:</span>
<code class="output__value display-label"></code>
</li>
</ul>
<script type="module">
const autocomplete = document.querySelector('gstock-autocomplete');
const value = document.querySelector('.output__value.value');
const displayLabel = document.querySelector('.output__value.display-label');
await Promise.all([customElements.whenDefined('gstock-autocomplete')]).then(() => {
value.innerText = autocomplete.value;
displayLabel.innerText = autocomplete.displayInput.value;
autocomplete.addEventListener('gstock-input-event', event => {
console.info('Emitted event', event);
const target = event.target;
value.innerText = target.value;
displayLabel.innerText = target.displayInput.value;
});
});
</script>Control de formulario
Este componente funciona con elementos estándar <form>. Consulta la sección sobre controles de formulario para obtener más información sobre el envío de formularios y la validación del lado del cliente.
Campo obligatorio
Utilice el atributo required para que el valor del componente sea obligatorio.
<form>
<gstock-autocomplete name="name" label="Required field:" required help-text="The form will not be submitted if a required field is incomplete.">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<br>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
await Promise.all([
customElements.whenDefined('gstock-autocomplete'),
customElements.whenDefined('gstock-button'),
]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
alert(`The field is valid!\n\n${formData}`);
});
});
</script>Mensajes de error personalizados
Para crear un error de validación personalizado, pase una cadena no vacía al método setCustomValidity().
Esto anulará cualquier restricción de validación existente. Para hacer que el autocomplete sea válido nuevamente, llame a setCustomValidity() otra vez con una cadena vacía.
<form>
<gstock-autocomplete label="Select the `gstock` option to make the autocomplete valid:" required help-text="The form will not be submitted when a custom validity is set and the browser will show a
validation error when the containing form is submitted.">
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="gstock">gstock</gstock-option>
<gstock-option value="option-3">Option 2</gstock-option>
</gstock-autocomplete>
<br>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
const autocomplete = form.querySelector('gstock-autocomplete');
await Promise.all([
customElements.whenDefined('gstock-autocomplete'),
customElements.whenDefined('gstock-button'),
]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
alert(`The field is valid!\n\n${formData}`);
});
autocomplete.addEventListener('gstock-input-event', () => {
if (autocomplete.value === 'gstock') {
autocomplete.setCustomValidity('');
} else {
autocomplete.setCustomValidity("You must autocomplete 'gstock' before sending!");
}
});
});
</script>Estilos de validación
Utilice el atributo validity-styles para aplicar estilos de validación. Estos estilos se aplican solo después de una interacción del usuario, como escribir o enviar el formulario.
<form>
<gstock-autocomplete name="name" label="Name:" help-text="This field is required." required validity-styles>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<br>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
await Promise.all([
customElements.whenDefined('gstock-autocomplete'),
customElements.whenDefined('gstock-button'),
]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
alert(`The field is valid!\n\n${formData}`);
});
});
</script>Validación en línea
Para deshabilitar los mensajes de error del navegador, debe cancelar el evento gstock-invalid-event. Luego puede aplicar sus propios errores de validación en línea.
<form class="inline-validation">
<gstock-autocomplete name="name" label="Name:" help-text="This field is required." required validity-styles>
<gstock-option value="option-1">Option 1</gstock-option>
<gstock-option value="option-2">Option 2</gstock-option>
<gstock-option value="option-3">Option 3</gstock-option>
</gstock-autocomplete>
<br>
<div class="error" aria-live="polite" hidden></div>
<br>
<gstock-button size="small" type="submit">Submit</gstock-button>
<gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>
<script type="module">
const form = document.querySelector('form');
const nameError = form.querySelector('.error');
await Promise.all([
customElements.whenDefined('gstock-autocomplete'),
customElements.whenDefined('gstock-button'),
]).then(() => {
form.addEventListener(
'gstock-invalid-event',
event => {
event.preventDefault();
nameError.textContent = `Error: ${event.target.validationMessage}`;
nameError.hidden = false;
event.target.focus();
},
{ capture: true },
);
form.addEventListener('submit', event => {
event.preventDefault();
nameError.hidden = true;
nameError.textContent = '';
setTimeout(() => {
const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
alert(`The field is valid!\n\n${formData}`);
}, 50);
});
form.addEventListener('reset', () => {
nameError.hidden = true;
nameError.textContent = '';
});
});
</script>