Ottenere jQueryUi Completamento automatico per lavorare con jQueryMobile

Sto lavorando a un’applicazione jQueryMobile con alcuni campi modulo che richiedono funzionalità di completamento automatico. Sto lavorando con il plugin di completamento automatico jQueryUi ma non riesco a farlo funzionare correttamente. Funziona bene se il mio modulo è la pagina iniziale caricata nel browser ma non funziona se il modulo viene caricato in seguito tramite il meccanismo di caricamento Ajax jQueryMobile.

Le versioni con cui sto lavorando sono:
jQueryMobile: 1.0a4.1
jQueryUi: 1.8.9
jQuery: 1.4.4

La mia funzione di completamento automatico si presenta così:

$(function () { $('#search').autocomplete({ source: '/Autocomplete/SearchAutoComplete', minLength: 3, select: function (event, ui) { } }); }); 

Il mio pensiero è che questo deve essere collegato alla pagina triggers corrente, ma non sono sicuro di come farlo. Qualcuno può farmi sapere come farlo?

Inoltre, non sono legato alla soluzione di completamento automatico jQueryUi. Se c’è un modo migliore per farlo, per favore fatemelo sapere.

Grazie,
Greg

Ora che JQuery Mobile è maturato un bel po ‘e si sta avvicinando alla sua versione 1.0, ho deciso di fare un altro tentativo per farlo funzionare correttamente. Ho avuto un buon successo quindi mi piacerebbe condividere la soluzione qui.

Ecco le versioni con cui sto lavorando attualmente (dal 01-Feb-2012):

jQuery Mobile 1.0.1
jQuery 1.6.4
Interfaccia utente jQuery 1.8.12

L’ordine in cui gli script sono referenziati è fondamentale. Deve essere jQuery, jQuery UI, jQuery Mobile, quindi il file di script personalizzato durerà. La mia testa di pagina si presenta così:

    My jQM App        

Tutto il codice di completamento automatico dovrebbe essere in un file .js separato e dovrebbe essere l’ultimo file collegato. In questo esempio, il mio è script.js.

Successivamente, assicurati che tutti i div della tua pagina (data-role = ‘page’) abbiano anche un id impostato. Ad esempio, nella mia pagina di ricerca che ho

 

Ora che tutti i div della pagina hanno ID puoi legarti all’evento pagecreate di jQuery Mobile per quel div. In una pagina jQuery standard avresti qualcosa di simile per il completamento automatico:

 $('#search').autocomplete({ source: '/Autocomplete/SearchAutoComplete', minLength: 3, select: function (event, ui) { } }); 

Per fare l’equivalente ma averlo collegato al div specifico della pagina assomiglia a questo:

 $('#searchPage').live('pageinit', function (event) { $('#search').autocomplete({ source: '/Autocomplete/SearchAutoComplete', minLength: 3, select: function (event, ui) { } }); }); 

Questo ha funzionato bene per me finora. Sono stato in grado di rimuovere la maggior parte degli attributi data-ajax = “false” che avevo in atto come soluzione alternativa. Questo, a sua volta, ha portato a migliori prestazioni delle applicazioni. Non ho mai fatto un test completo di compatibilità tra jQuery UI e jQuery Mobile, quindi il tuo chilometraggio potrebbe variare. Si prega di lasciare un commento qui se si incontrano problemi con questo metodo. In bocca al lupo.

Per riferimento futuro ho recentemente rilasciato un plugin autoComplete scritto appositamente per l’utilizzo con jQuery Mobile:

http://www.andymatthews.net/code/autocomplete/

 $('div').live('pagebeforecreate',function(event,ui){ // do something in jquery }); 

Ho fatto un sacco di ricerche. L’ordinamento automatico di jQuery UI funziona per modificare una casella di testo di digitazione. La casella di ricerca del filtro jQuery Mobile simula un autocompete, ma in realtà non l’ho trovato molto utile per l’uso con un modulo di raccolta dati reale.

In questo articolo ho iniziato a utilizzare il completamento automatico dell’interfaccia utente di jQuery, ma ho continuato a riscontrare problemi di formattazione. Ho finito per scrivere la mia auto ajax solo (al momento) autocomplete e ho pensato di condividerlo. La fonte è lì per voi a modificare come meglio credi. Forse qualcuno può prenderlo e migliorarlo o semplicemente usarlo così com’è.

http://schworak.com/blog/e75/jquery-mobile—autocomplete-text-input/

Non sono sicuro che sia applicabile nel tuo caso, ma una soluzione alternativa sarebbe aggiungere l’attributo data-ajax = “false” per impedire che la pagina venga caricata da ajax.

http://jquerymobile.com/demos/1.0a4.1/#docs/pages/link-formats.html

jQuery Mobile ora ha la funzione di completamento automatico, in cui i risultati vengono inseriti in una lista. La loro pagina dimostrativa ha ottimi esempi su come implementarla, sia per i dati locali che per quelli remoti.

Di recente ho rilasciato un componente autoComplete con zero-dependency. (No-jQuery)

Questo supporta completamente la maggior parte dei browser mobili come Android, iOS.

https://github.com/skplanet/sweetsearch/