Autocomplete

<gstock-autocomplete> | GstockAutocomplete
Option 1 Option 2 Option 3 
<gstock-autocomplete>
  <gstock-option value="1">Option 1</gstock-option>
  <gstock-option value="3">Option 2</gstock-option>
  <gstock-option value="13">Option 3</gstock-option>
</gstock-autocomplete>

Tamaño

Utilice el atributo de size para cambiar el tamaño del componente.

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 
<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.

Option 1 Option 2 Option 3 
<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>

Deshabilitado

Utilice el atributo disabled para deshabilitar el componente.

Option 1 Option 2 Option 3 
<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.

Option 1 Option 2 Option 3 
<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.

Option 1 Option 2 Option 3 
<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.

Custom help-text with a link. Option 1 Option 2 Option 3 
<gstock-autocomplete>
  <label slot="label" style="display: inline-flex; gap: 4px">
    <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>

Clearable

Use the clearable attribute to add a clear button when the autocomplete has content.

Option 1 Option 2 Option 3 
<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>

Prefix and suffix

Use the prefix and suffix attributes to add icons.

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 
<gstock-autocomplete placeholder="Small" size="small" prefix="search" suffix="star" style="margin-bottom: 1rem">
  <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" style="margin-bottom: 1rem">
  <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" style="margin-bottom: 1rem">
  <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>

For custom prefixes and suffixes with HTML, use the prefix and suffix slots.

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 
<gstock-autocomplete placeholder="Small" size="small" style="margin-bottom: 1rem">
  <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" style="margin-bottom: 1rem">
  <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" style="margin-bottom: 1rem">
  <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>

Grouping

Section 1 Option 1 Option 2 Option 3 Section 2 Option 4 Option 5 Option 6 
<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>

Multiple

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 
<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>

Placement

Use the placement attribute to placement of the autocomplete listbox. Allow placements are top and bottom.

Option 1 Option 2 Option 3 
<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>

Filterable

Use the filterable attribute to filter options.

Red Orange Yellow Green Blue Indigo Violet Black White Gray Magenta Cyan Magenta Lime Teal Purple Maroon Navy Olive Silver Gold Brown 
<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>

Not found

By default, a message is showing when not found results.

<gstock-autocomplete clearable label="Color" placeholder="Select a color...">
</gstock-autocomplete>

<gstock-autocomplete clearable filterable label="Color" placeholder="Filter color...">
</gstock-autocomplete>

Use the not-found slot to custom the informative message when not found results.

Custom Not Found Results! 
<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>

Dynamic options

Use the gstock-input-event event to handle dynamically the options.

  • 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>

Events

Change

Use the gstock-change-event event to observe when the value was changed. To emit this event autocomplete a option from the list.

Option 1 Option 2 Option 3
  • 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>

Clear

Use the gstock-clear-event event to observe when the value was cleared. To emit this event enable the clearable attribute and press the clear button when the value is not empty.

Option 1 Option 2 Option 3
  • 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>

Input

Use the gstock-input-event event to observe when the value was filtered. To emit this event enable the filterable attribute and enter some text, the event will be issued every time that text changes.

Option 1 Option 2 Option 3
  • 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

Campo obligatorio

Utilice el atributo required para que el valor del componente sea obligatorio.

Option 1 Option 2 Option 3
Submit Reset 
<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>

Custom error messages

To create a custom validation error, pass a non-empty string to the setCustomValidity() method.

This will override any existing validation constraints. To make the autocomplete valid again, call setCustomValidity() again with an empty string.

Option 1 gstock Option 2
Submit Reset 
<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>

Styling validation

Use the validity-styles attribute to apply validation styles. These styles are applied only after a user interaction, such as typing or submitting.

Option 1 Option 2 Option 3
Submit Reset 
<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>

Inline validation

To disable the browsers error messages, you need to cancel the gstock-invalid-event event. Then you can apply your own inline validation errors.

Option 1 Option 2 Option 3

Submit Reset 
<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>