Select
L’elemento select fornisce un menu di opzioni rappresentate tramite una tendina espandibile.
Input / tipo Select
Select / Classico menu "a tendina"
Select con Pulsante / "Table" variante custom
Select / Combobox
Ulteriore testo informativo
// HTMLElement
const element = document.querySelector('[data-sil-combobox]')
// Config (opzionale)
const config = {
all: bool // Se true mostra il 'seleziona tutti',
wait: bool // Se true, al click del tasto "VAI" non appaiono chips e modali.
}
// Init
const exampleComboBox = new SILCombobox(element, config)
exampleComboBox.init
// Callback fn
exampleComboBox.callback = function (e) {
exampleComboBox.continue = true // Attiva nuovamente chips e modali, se il componente è stato inizializzato con il wait su true
console.log("Callback event", e.target)
}
Select / con Autocomplete [DEPRECATO]
Ulteriore testo informativo
Ulteriore testo informativo
Select / con Autocomplete
All'attributo data-sil-has-s-autocomplete è possibile passare l'endpoint per il fetch delle voci che andranno a comporre la select, oppure inizializzarla via JS.
Per motivi tecnici, nell'esempio sottostante vengono chiamati dei JSON locali.
Ulteriore testo informativo
Tryout Init / Update
Ulteriore testo informativo
// Init - Può essere inizializzato passando un path per il fetch (come da snippet HTML)
const autocomplete = new SILAutocomplete(document.querySelector('[data-sil-has-s-autocomplete]'))
autocomplete.init
// OPPURE passando un JSON come secondo argomento
const autocompleteData = new SILAutocomplete(document.querySelector('[data-sil-has-s-autocomplete]'), {
"data": [
{
"id": 0,
"title": "Cittadino",
"description": "Un cittadino è un abitante o residente in uno Stato del quale possiede la cittadinanza avendone i conseguenti diritti e i doveri."
},
{
"id": 1,
"title": "Ente",
"description": "Istituzione organizzata per determinati fini. Se all'ente viene riconosciuta la personalità giuridica, l'ente è una persona giuridica, o ente morale."
},
{
"id": 2,
"title": "Azienda",
"description": "L'azienda è un'attività economica organizzata ai fini della produzione o dello scambio di beni o servizi."
},
{
"id": 3,
"title": "Altro tipo"
}
]
})
autocompleteData.init
// Pulisce l'input
autocomplete.clean
// Ottenere Item selezionato
autocomplete.selectedOption
// Ottenere oggetto dell'Item selezionato
autocomplete.selectedObject
// Callback su change
iAutocomplete.callback = function (e) {
console.log("Callback al change", e.target)
}
{
"data": [
{
"id": 0,
"title": "Cittadino",
"description": "Un cittadino è un abitante o residente in uno Stato del quale possiede la cittadinanza avendone i conseguenti diritti e i doveri."
},
{
"id": 1,
"title": "Ente",
"description": "Istituzione organizzata per determinati fini. Se all'ente viene riconosciuta la personalità giuridica, l'ente è una persona giuridica, o ente morale."
},
{
"id": 2,
"title": "Azienda",
"description": "L'azienda è un'attività economica organizzata ai fini della produzione o dello scambio di beni o servizi."
},
{
"id": 3,
"title": "Altro tipo"
}
]
}