Autocomplete

Forms autocomplete

A typeahead input that searches a collection and fills a value.

Markup

Drops in as data-pb-block="autocomplete".

html

<div data-pb-block="autocomplete" class="pb-autocomplete" data-pb-collection="" data-pb-label-field="name" x-data="pbAutocomplete($el)" style="position:relative;font-family:inherit;max-width:24rem;">
  <input type="text" class="pb-autocomplete__input" name="autocomplete" x-model="q" @input="search()" @focus="open=true" placeholder="Search…" autocomplete="off" style="width:100%;padding:0.6rem 0.8rem;border:1px solid #cbd5e1;border-radius:0.5rem;font:inherit;">
  <input type="hidden" class="pb-autocomplete__value" :value="selectedId">
  <ul class="pb-autocomplete__menu" x-show="open && results.length" x-cloak @click.outside="open=false" style="position:absolute;z-index:30;left:0;right:0;margin:0.25rem 0 0;padding:0.25rem;list-style:none;background:#fff;border:1px solid #e2e8f0;border-radius:0.5rem;box-shadow:0 12px 32px -12px rgba(2,6,23,0.35);max-height:14rem;overflow:auto;">
    <template x-for="r in results" :key="r.id">
      <li class="pb-autocomplete__option" x-text="r.label" @click="pick(r)" style="padding:0.5rem 0.6rem;border-radius:0.375rem;cursor:pointer;"></li>
    </template>
  </ul>
</div>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="autocomplete" so it imports as a labelled, editable component.
Field name: The control's name maps to a collection field key — the runtime collects it on submit of the surrounding Form.
Validation: Mark it required; the collection field's type and options (e.g. email, select choices) drive server-side validation.