JQuery Mobile是目前一款使用廣泛的移動設備開發框架，它方便我們快速地構建基于HTML5的移動應用程序。其中，城市選擇組件是常用的組件之一，可以幫助用戶方便地選擇目的地城市。下面我們來看一下如何使用JQuery Mobile實現城市選擇。

$( document ).on( "pagecreate", "#page-home", function() {
$( "#city-picker" ).on( "filterablebeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html("");
if ( value && value.length >2 ) {
$ul.html( "
" );
$ul.listview( "refresh" );
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
crossDomain: true,
data: {
q: $input.val()
}
})
.then( function ( response ) {
$.each( response, function ( i, val ) {
html += "
" + val + "
";
});
$ul.html( html );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout");
});
}
});
});

以上代碼中，我們使用了JQuery Mobile提供的filterable組件來實現城市選擇的過濾功能，并調用了GD GeoBytes提供的自動完成城市功能。該功能允許我們按照用戶輸入的關鍵字返回相關的城市列表。通過以上代碼，我們可以為用戶提供一種非常方便的城市選擇方式，而用戶只需要輸入城市名稱的開頭幾個字，就能快速找到自己需要的城市。