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
    4,397
    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();
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  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
    4,397
    Nell'inizializzazione del combobox puoi impostare l'evento select in questo modo:
    codice:
    $(".combobox").combobox({ 
       select: function (event, ui) { 
          console.log(ui.item.value);
       }
    });
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  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 © 2019 vBulletin Solutions, Inc. All rights reserved.