jQuery pergi balik bandar dan contoh pertanyaan tarikh explanation_jquery

Kebanyakan laman web pelancongan menyediakan fungsi untuk memasuki bandar dan tarikh untuk membuat pertanyaan. Pengguna hanya perlu memasukkan pinyin atau singkatan bandar dalam kotak input untuk menanyakan nama bandar yang berkaitan dengan serta-merta Apabila memilih tarikh, kawalan kalendar dua bulan akan muncul ringkas dan jelas.
Artikel ini menggunakan pemalam datepicker pustaka jquery ui untuk mengawal kalendar dan memasukkan pemalam gesaan bandar.

XHTML

<div class="qline"> 
  <label for="arrcity">出发城市：</label><input type="text" name="arrcity" class="input" 
id="arrcity" />  
  <div id="suggest" class="ac_results"></div> 
  <label for="city2">目的城市：</label><input type="text" name="city2" class="input" 
id="city2" /> 
  <div id="suggest2" class="ac_results"> </div> 
</div> 
<div class="qline"> 
  <label for="startdate">出发日期：</label><input type="text" name="startdate" class="input" 
id="startdate" /> 
  <label for="enddate">返回日期：</label><input type="text" name="enddate" class="input" 
id="enddate" /> 
</div> 

Reka kotak input untuk bandar dan tarikh Ambil perhatian bahawa dua DIV, div#suggest dan div#suggest2, digunakan untuk memaparkan senarai bandar Kawalan CSS lalai.
CSS

.input{border:1px solid #999} 
.qline{line-height:24px; margin:10px} 
#suggest,#suggest2{width:200px;} 
.gray{color:gray;} 
.ac_results {background:#fff;border:1px solid #7f9db9;position: absolute; 
z-index:10000;display: none;} 
.ac_results ul{margin:0;padding:0;list-style:none;} 
.ac_results li a{white-space: nowrap;text-decoration:none;display:block; 
color:#05a;padding:1px 3px;} 
.ac_results li{border:1px solid #fff; line-height:18px} 
.ac_over,.ac_results li a:hover {background:#c8e3fc;} 
.ac_results li a span{float:right;} 
.ac_result_tip{border-bottom:1px dashed #666;padding:3px;} 

Gaya di atas digunakan terutamanya untuk mengawal penampilan pertanyaan bandar dan untuk gaya kawalan kalendar, kami menggunakan gaya jquery ui sahaja: ​​

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

jQuery
Mula-mula, petik javascript utama:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui.js"></script> 
<script type="text/javascript" src="js/aircity.js"></script> 
<script type="text/javascript" src="js/j.suggest.js"></script> 

Perhatikan bahawa aircity.js menyimpan data seperti nama bandar dalam bentuk tatasusunan. j.suggest.js mengawal input dan pertanyaan bandar Anda boleh memuat turun dan menggunakannya secara langsung.
Terutamanya lihat halaman menggunakan jQuery.

$(function(){ 
  $("#arrcity").suggest(citys,{ 
    hot_list:commoncitys, 
    attachObject:"#suggest" 
  }); 
  $("#city2").suggest(citys,{ 
    hot_list:commoncitys, 
    attachObject:"#suggest2" 
  }); 
}); 

Kod di atas melaksanakan fungsi memasukkan dan menyoal bandar dan memanggil data bandar. hot_list:commoncitys merujuk kepada bandar popular awal, dan attachObject:"#suggest" ialah DIV yang dikaitkan dengan senarai bandar apabila menetapkan input.
Seterusnya kita perlu menambah kod untuk mengawal kalendar.
Kita perlu mengawal tarikh efektif kalendar, iaitu memaparkan tarikh semasa sebelum tarikh semasa tidak boleh dipilih kerana anda tidak boleh memilih tarikh yang telah berlalu sebagai tarikh berlepas. Terdapat juga kalendar untuk dipaparkan selama dua bulan berturut-turut. Kodnya adalah seperti berikut:

today=new Date(); 
var year = today.getFullYear(); 
var month = today.getMonth(); 
var day = today.getDate(); 
$("#startdate,#enddate").css("color","#aaa").attr("value","yyyy-mm-dd"); 
$("#startdate,#enddate").datepicker({ 
  minDate: new Date(year, month, day+1), 
  numberOfMonths: 2, 
  onClose:function(){ 
   $(this).css("color","#000"); 
  } 
}); 

Kod mula-mula memperoleh tarikh semasa (iaitu hari ini), kemudian kandungan dan gaya kotak input tarikh awal, kemudian memanggil pemalam detepicker, menetapkan tarikh minimum kepada tarikh semasa dan menetapkan numberOfMonths kepada dua berturut-turut bulan Selain itu, apabila tarikh dipilih, panggil fungsi untuk menukar gaya kotak input. Hanya tambahkan kod di atas pada kod pertanyaan input bandar.
Jadi, fungsi pemilihan bandar dan tarikh anda telah dilaksanakan. Artikel ini tidak melibatkan pengesahan tarikh Jika tarikh pulang tidak boleh kurang daripada tarikh berlepas, perkara ini diserahkan kepada semua orang untuk memikirkannya.

Di atas ialah keseluruhan proses cara menggunakan jQuery untuk melaksanakan pertanyaan bandar dan paparan kalendar saya harap ia akan membantu pembelajaran semua orang.