Autocomplete su più moduli nella stessa pagina

[Marcolino's]

Ciao, ho bisogno di un piccolo aiutino
Bando alle ciance, ecco cosa realizzando: un sito single page per una intranet aziendale.
In pratica sulla stessa pagina, devo essere visibili alternativamente due registri magazzino, cosa fatta, ma soprattutto deve essere possibile iscrivere nuovi record, fatto, e deve essere possibile stampare una record, fatto!
Fino a qui nulla di speciale, apparentemente, in effetti, a parte che per ora la pagina è un casino e andrà rivista sia in termini di refactoring del codice, sia in termini di casino vero e proprio, il problema che mi si pone con l'autocomplete ( jQuery UI ) è che mi è toccato riscrivere la stessa funzione per due form che stanno sulla stessa pagina.
In pratica sia l'iscrizione, che la stampa, sono realizzate partendo da due finestre modeless, e tramite un form si iscrivono i dati.
Ad un certo punto si arriva alla casella dove si deve immettere il nome del comune, autocomplete() estrae il nome dal database tramite chiamata remota e funziona benissimo... il problema è che in fase di stampa, si possono tirare fuori i dati anche per comune e in questo caso si dovrebbe aprire la finestra a discesa sotto il campo di inserimento... si dovrebbe perché in realtà si apre nella casella di iscrizione ma non in quella di stampa.
Ho cercato su internet ma non sono riuscito a capire bene cosa fare.
In pratica se la prima casella si chiama che so <input type="text" name="comuni-insert"> e la seconda, che so <input type="text" name="comuni-print">, non è che posso fare qualche cosa del tipo $('input[name^="comuni-"]').autocomplete({ ... }); perché non funziona e quindi nello stesso file dovrei realizzare due funzioni praticamente uguali che hanno di differente solo il nome della casella chiamante.
Ed anche inserendo la clausola appendTo: '#myIscrizione' dentro autocomplete() non cambia nulla, dato che questa clausola può essere usata solo per un elemento, e non si possono accodare più elementi.
Cioè non si può scrivere qualche cosa tipo appendTo: '#myIscrizione, #myStampa'.
Qualcuno riesce ad aiutarmi?

[KillerWorm]

Ciao, appendTo credo serva a specificare solo il contenitore dentro il quale deve essere appeso il menu a discesa, che prescinde comunque dall'elemento a cui è applicato l'autocomplete.

Il problema potrebbe dipendere dal fatto che l'elemento comuni-print venga creato successivamente all'applicazione stessa dell'autocomplete (posso solo presumerlo perché non vedo come hai impostato il tutto).

In tal caso potrebbe esseci bisogno di "delegare" in qualche modo l'applicazione stessa dell'autocomplete, in modo che questo sia applicato anche per gli elementi non ancora presenti sulla pagina, che vengono creati successivamente.

Da quel che ho visto in giro, in questi casi viene applicato l'autocomplete delegando l'evento focus.

A questo punto puoi fare una cosa del genere:

$('body').on('focusin', 'input[name^="comuni-"]', function() {
  $(this).autocomplete({...});
});

Vedi se in questo modo si risolve.

Se il problema non dipende da questo, cioè se gli elementi in questione esistono al momento dell'applicazione dell'autocomplete, allora c'è qualcosa che mi sfugge; in tal caso prova a chiarire meglio il contesto.

[Marcolino's]

Ciao, purtroppo no, nel senso che tutto è già sulla pagina, ovvero sia la finestra modale di inserimento dati che quella per la stampa non sono caricate dinamicamente, ma esistono già sulla pagina.
Purtroppo (o per fortuna non lo so) usando un framework come bootstrap alla versione 3, per compatibilità con versioni di browser datate, autocomplete deve essere usato con appendTo o non funziona ( già provato ) probabilmente per una questione di priorità nel codice rispetto al focus del document? Non ne ho idea francamente.
Il tuo sistema funziona se non viene richiamata su di una finestra modale, in quel caso ci vuole per forza il richiamo alla finestra tramite appendTo, che però non può essere definito dinamicamente.
Quindi sono da capo a 12
Codice: volentieri, ma è una pagina di circa 50Kb di solo codice e un po' incasinata al momento
Facciamo una cosa, appena risolvo metto qui un po' di codice per far capire cosa ho fatto, sempre che riesca a risolvere.

[Marcolino's]

PS: visto che appendTo prevede l'uso anche dei nomi di classe e non solo gli identificatori, ho provato ad inserire nelle due finestre modali, una classe chiamata autocomplete e passarla ad appendTo: '.autocomplete' be sappiatelo, funziona solo per la prima finestra modale

[Marcolino's]

Funziona!
Funziona se si mette il focus non al document ma alla finestra modale.

$('document').on('focusin', '#recipient-name, #stampa-nome', function() {

diventa:

$('.modal').on('focusin', '#recipient-name, #stampa-nome', function() {

e non serve nemmeno dare l'appendTo dato che prende il focus dalla finestra chiamante

[KillerWorm]

Ciao, purtroppo no, nel senso che tutto è già sulla pagina, ovvero sia la finestra modale di inserimento dati che quella per la stampa non sono caricate dinamicamente, ma esistono già sulla pagina.

La cosa continua a suonarmi strana. In questo caso l'autocomplete dovresti poterlo assegnare tranquillamente. Assicurati comunque che, nel momento in cui lo applichi, quei due elementi siano già stati creati nella pagina.

Verifica se in console salta fuori qualche errore.

Magari prova a fare anche qualche console.log() per capire se c'è qualcosa che non sta funzionando come previsto.
Ad esempio verifica che i due elementi a cui devi applicare l'autocomplete siano effettivamente selezionati con input[name^="comuni-"]:.
Prima dell'applicazione dell'autocomplete metti una cosa del genere e vedi cosa salta fuori in console:

console.log($('input[name^="comuni-"]'));

Dovrebbe darti un oggetto jQuery che abbia length:2, dal momento che dovrebbe selezionare quei due elementi sulla pagina.
Dentro quell'oggetto dovrebbero esserci anche i riferimenti proprio a quei due elementi (che dovresti poter esaminare attraverso la console).

Se il selettore becca un solo elemento (al quale viene attualmente applicato l'autocomplete), quindi length:1, allora il problema sta qua.

Fai questa verifica.

Purtroppo (o per fortuna non lo so) usando un framework come bootstrap alla versione 3, per compatibilità con versioni di browser datate, autocomplete deve essere usato con appendTo o non funziona ( già provato ) probabilmente per una questione di priorità nel codice rispetto al focus del document?

Non ho idea se ci siano conflitti tra le varie versioni tra bootstrap, jQuery e UI, ad ogni modo appendTo (di autocomplete) non serve ad applicarne l'autocomplete ma solo a specificare il contenitore al quale agganciare il menu a discesa (che prescinde dall'elemento a cui è associato l'autocomplete stesso)... ma questo l'ho già indicato nel precedente post

Codice: volentieri, ma è una pagina di circa 50Kb di solo codice e un po' incasinata al momento
Facciamo una cosa, appena risolvo metto qui un po' di codice per far capire cosa ho fatto, sempre che riesca a risolvere.

No, chiaramente non ha alcun senso postare il codice dell'intera pagina, sarebbe stato meglio vederla in azione se fosse una pagina pubblica. Il problema, per te, è che se non dai modo agli altri di visionare la pagina, e quindi cercare di capire dove sta il problema, difficilmente ti si può aiutare con le sole indicazioni che hai postato.

Comunque se riesci a risolvere da solo, buon per te


EDIT:

Funziona!

ho visto solo ora