Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    [JQuery] Autocomplete Combobox

    Ho preso il codice della combobox dal sito di Jquery UI (https://jqueryui.com/autocomplete/#combobox) così com'è e l'ho implementato nel mio script; se ora volessi aggiungere una seconda combobox, devo copiare tutto il popò di codice un'altra volta?
    Grazie.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Duplicare l'intero script (cioè il codice JavaScript/jQuery) che definisce il widget è inutile e ridondante, e potrebbe giusto creare dei problemi. Dovrai chiaramente scrivere il codice HTML necessario per creare la seconda combobox, eventualmente applicando una class piuttosto che un id; a quel punto puoi semplicemente inizializzare entrambe le combobox usando tale classe.

    Nell'esempio viene usato un id; cioè nel codice HTML si ha:
    codice:
    <select id="combobox">
    .
    e nello script tale elemento viene inizializzato con:
    codice:
    $( "#combobox" ).combobox();
    .
    Tu puoi usare una classe se ti serve inizializzare facilmente più combobox. Quindi nel codice HTML avrai:
    codice:
    Combobox 1
    <select class="combobox">
    [...]
    Combobox 2
    <select class="combobox">
    [...]
    Combobox N
    <select class="combobox">
    e nello script puoi inizializzarle così:
    codice:
    $( ".combobox" ).combobox();
    Nota l'uso del punto (che identifica appunto tutti gli elementi con tale classe) anziché il cancelletto (che identifica l'elemento con quell'id).

    Se vuoi comunque usare degli id (per differenziare ad esempio i singoli elementi) puoi costruire il selettore jQuery in modo da comprendere tutti i vari id interessati, relativi agli elementi da inizializzare.
    Puoi avere quindi una situazione del genere:
    - HTML
    codice:
    Combobox 1
    <select id="combobox_1">
    [...]
    Combobox 2
    <select id="combobox_2">
    [...]
    Combobox N
    <select id="combobox_N">
    .
    - jQuery:
    codice:
    $( "#combobox_1,#combobox_2,#combobox_N" ).combobox();
    .
    O, ancora, inizializzare singolarmente i vari combobox:
    codice:
    $( "#combobox_1").combobox();
    $( "#combobox_2").combobox();
    $( "#combobox_N").combobox();
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Duplicare l'intero script (cioè il codice JavaScript/jQuery) che definisce il widget è inutile e ridondante, e potrebbe giusto creare dei problemi. Dovrai chiaramente scrivere il codice HTML necessario per creare la seconda combobox, eventualmente applicando una class piuttosto che un id; a quel punto puoi semplicemente inizializzare entrambe le combobox usando tale classe.

    Nell'esempio viene usato un id; cioè nel codice HTML si ha:
    codice:
    <select id="combobox">
    .
    e nello script tale elemento viene inizializzato con:
    codice:
    $( "#combobox" ).combobox();
    .
    Tu puoi usare una classe se ti serve inizializzare facilmente più combobox. Quindi nel codice HTML avrai:
    codice:
    Combobox 1
    <select class="combobox">
    [...]
    Combobox 2
    <select class="combobox">
    [...]
    Combobox N
    <select class="combobox">
    e nello script puoi inizializzarle così:
    codice:
    $( ".combobox" ).combobox();
    Nota l'uso del punto (che identifica appunto tutti gli elementi con tale classe) anziché il cancelletto (che identifica l'elemento con quell'id).

    Se vuoi comunque usare degli id (per differenziare ad esempio i singoli elementi) puoi costruire il selettore jQuery in modo da comprendere tutti i vari id interessati, relativi agli elementi da inizializzare.
    Puoi avere quindi una situazione del genere:
    - HTML
    codice:
    Combobox 1
    <select id="combobox_1">
    [...]
    Combobox 2
    <select id="combobox_2">
    [...]
    Combobox N
    <select id="combobox_N">
    .
    - jQuery:
    codice:
    $( "#combobox_1,#combobox_2,#combobox_N" ).combobox();
    .
    O, ancora, inizializzare singolarmente i vari combobox:
    codice:
    $( "#combobox_1").combobox();
    $( "#combobox_2").combobox();
    $( "#combobox_N").combobox();
    Ok molto chiaro grazie, capito come implementare più combobox; mi si presenta però un ulteriore problema, non riesco a recuperare il value su onchange, questo perchè ho visto da debug che la vera select viene nascosta per rimanere li morta, il widget graficamente crea una nuova struttura ex novo e va a pescare le option dalla mia select, quindi mettere l'onchange sulla mia select non produce risultati; non riuscendo quindi a recuperare i value, ho dovuto accroccare una soluzione davvero brutta, ho impostato una variabile globale e modificato il widget in 3 punti chiave dove prendere il valore (o null nei casi di selezione nomatch), quindi ad esempio nella funzione "autocompleteselect" sono andato ad aggiungere la mia riga js "mia_var_globale = ui.item.option.value;"... questa accroccata non mi rende applicabile il tuo consiglio per più combobox, quindi la domanda è, come posso fare a recuperare il value della mia vera select? JQuery UI mette a disposizione i metodi per un autocomplete, ma non per il widget combobox, io almeno non ci sono riuscito.
    Grazie.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Nell'inizializzazione del combobox puoi impostare l'evento select in questo modo:
    codice:
    $(".combobox").combobox({ 
       select: function (event, ui) { 
          console.log(ui.item.value);
       }
    });
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Grazie mille dell'aiuto, funziona.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.