Oggi vedremo come usare l’autocomplete, via ajax su jQuery Mobile, la soluzione potrebbe essere interessante per risolvere, almeno in parte, alcuni problemi di spazio tipici delle applicazioni mobile.
La possibilità di partire con oggetti precostituiti è data dalle ultime versioni del nostro framework.
Tanto per iniziare creiamo la solita pagina jqm con all’interno del content una listview con il filter, queste opzioni dovrebbero essere già note da precedenti esperienze sul framework
<div data-role="page" id="page1"> <div data-role="header" data-position="fixed"> <h1>Page 1</h1> </div> <div data-role="content"> <h3>Città italiane</h3> <ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Cerca una città..." data-filter-theme="d"></ul> </div> <div data-role="footer" data-position="fixed"> <h3>Footer</h3> </div> </div>
La parte interessante sarà la funzione javascript che permetterà di gestire tutto. Per il bind degli eventi useremo l’evento pageinit e sull’oggetto che ha id autocomplete intercettiamo l’evento listviewbeforefilter per iniziare a pulire e settare qualche variabile:
$( document ).on( "pageinit", "#page1", function() {
$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
La parte successiva valuterà se è stata inserita una stringa nel filtro e se ha una lunghezza superiore a un carattere, se è così verrà effettuata una chiamata ajax a una pagina php che restituirà una stringa json.
if ( value && value.length > 1 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.ajax({
url: "autocomplete2.php",
dataType: "json",
data: {q: $input.val()},
async:false,
success: function ( response ) {
Il passo successivo sarà ciclare sul json e appendere gli elementi alla lista, compiuto questo step faremo il refresh della lista per attribuire lo stile corretto:
success: function ( response ) {
$.each( response, function ( i, val ) {
html += "<li>" + val + "</li>";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
}
L’ultima porzione di codice ci permetterà di associare il click agli elementi della lista per nasconderli e mettere l’elemento selezionato nell’input.
In alternativa si potrebbe stampare liste di link e proseguire nella navigazione:
$('#autocomplete').on('click','li',function(){
$('#autocomplete').empty();
$('input[data-type="search"]').val($(this).text())
})
Per comodità la pagina php che produce il json:
error_reporting(0);
require('include/mysql.inc.php');
$return_arr=array();
$nome=$_GET['q'];
$sql='select nome, sigla from province where nome like "%'.mysql_real_escape_string($nome).'%" order by nome';
$fetch=mysql_query($sql);
while($row=mysql_fetch_array($fetch, MYSQL_ASSOC)){
array_push($return_arr,$row['nome']);
}
mysql_close($conn);
echo json_encode($return_arr);
L’esempio
