Components

AutoCompleteRemote

Autocomplete che cerca sul server mentre si digita, per elenchi troppo lunghi da scaricare interi.

Panoramica

Gli altri componenti remote scaricano l'elenco una volta e poi filtrano in locale: va bene per decine o centinaia di righe. Con migliaia di clienti o utenti serve l'opposto. AutoCompleteRemote cerca sul server a ogni digitazione e porta a casa solo i risultati.

Il testo digitato arriva alla fetchFn sotto la chiave searchKey (default ricerca). Con endpoint serve searchColumn, che diventa un ilike su quella colonna.
minLength (default 2) e delay (default 300 ms) evitano una richiesta per ogni tasto. Al montaggio non parte nessuna richiesta: senza testo non c'è niente da cercare.
multiple per sceglierne più d'uno, exclude per togliere dai suggerimenti i valori già scelti altrove.
Le opzioni scelte restano fra i suggerimenti, così dopo una nuova ricerca il campo continua a mostrare il nome e non l'identificativo.
In modifica, initialOptions porta le opzioni già note dei valori caricati da fuori: senza, il campo mostrerebbe l'identificativo finché l'utente non cerca.

Nello schema è il tipo autocompleteremote (dalla 2.16.0; initialOptions dalla 2.16.1).

Anteprima live (con fetchFn mockato)

La fetchFn filtra un array locale come farebbe il server con il testo ricevuto in filtri.ricerca.

Utilizzo diretto

VueFormPlugin registra AutoCompleteRemote dalla 2.18.4; con le versioni precedenti va importato esplicitamente, come nell'esempio.

<script setup lang="ts">
import { ref } from 'vue'
import { AutoCompleteRemote } from '@pzeta/vue-form'

const idutente = ref<number | null>(null)
</script>

<template>
  <AutoCompleteRemote
    v-model="idutente"
    :fetch-fn="(filtri) => servizio.utenti(String(filtri?.ricerca ?? ''))"
    option-label="nomecompleto"
    option-value="idutente"
    label="Agente"
  />
</template>

Con `endpoint`

<AutoCompleteRemote
  v-model="idcliente"
  endpoint="anagrafica.clienti"
  select="idcliente,ragionesociale"
  search-column="ragionesociale"
  option-label="ragionesociale"
  option-value="idcliente"
/>

Senza searchColumn, con endpoint la ricerca non può essere fatta lato server. Vedi Sorgente dati endpoint.

In modifica: `initialOptions`

Il valore arriva dal record caricato, ma il componente non ha mai visto l'opzione corrispondente. Passandola, il campo mostra subito il nome:

<AutoCompleteRemote
  v-model="ordine.idcliente"
  :initial-options="[{ idcliente: ordine.idcliente, ragionesociale: ordine.cliente }]"
  :fetch-fn="cercaClienti"
  option-label="ragionesociale"
  option-value="idcliente"
/>

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`unknown`	—	Valore scelto; con `multiple` un array
`fetchFn`	`(filtri) => Promise<unknown[]>`	—	Ricerca: riceve i filtri, testo digitato compreso
`endpoint`	`string`	—	Alternativa a `fetchFn`: `[schema.]risorsa` PostgREST
`searchKey`	`string`	`'ricerca'`	Chiave con cui il testo arriva alla `fetchFn`
`searchColumn`	`string`	—	Colonna su cui cercare con `ilike` quando i dati arrivano da `endpoint`
`filter`	`string \| FilterCriteria`	—	Filtro statico, unito a quello di ricerca
`filterFields`	`RemoteFilterField[]`	—	Campi del form osservati per filtri dinamici
`fullData`	`Record<string, unknown>`	—	Dati del form per i filtri dinamici
`optionLabel`	`string`	—	Proprietà dell'etichetta
`optionTemplate`	`string`	—	Template dell'etichetta, es. `'{nome} ({email})'`
`optionValue`	`string`	—	Proprietà del valore; senza, il modello tiene l'oggetto intero
`multiple`	`boolean`	`false`	Selezione multipla
`exclude`	`Array<string \| number>`	—	Valori da togliere dai suggerimenti
`initialOptions`	`unknown[]`	—	Opzioni già note dei valori iniziali (dalla 2.16.1)
`minLength`	`number`	`2`	Caratteri minimi prima di interrogare il server
`delay`	`number`	`300`	Attesa prima della richiesta, in ms
`placeholder`	`string`	—	Placeholder
`showClear`	`boolean`	—	Pulsante di cancellazione
`dropdown`	`boolean`	—	Pulsante che apre l'elenco senza digitare

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`unknown`	Valore scelto

Differenza con `autocomplete` e `SelectRemote`

Caso	Componente
Poche decine/centinaia di opzioni, filtrate in locale	`SelectRemote`
Suggerimenti calcolati dal chiamante, con un proprio listener `complete`	`autocomplete` con `field.listeners`
Migliaia di righe, ricerca sul server mentre si digita	`AutoCompleteRemote`

AiFieldTrigger

Pulsante che genera il valore di un campo con l'AI, con spinner e causa dell'errore; nei form dinamici è l'opzione di campo `ai`.

BarcodeScanner

Scanner di codici a barre e QR code tramite fotocamera del dispositivo, con fallback per input manuale.