大(dà)多(duō)旅遊網站(zhàn)上(shàng)都提供了一個(gè)城市和(hé)日期輸入查詢的功能。用戶在輸入框中隻需輸入城市的拼音(yīn)或者簡稱就可(kě)以即時(shí)查詢到相關城市的名稱，選擇日期時(shí)則是出現兩個(gè)月的日曆控件，隻需點選日期即可(kě)，整個(gè)操作(zuò)簡捷明(míng)了。

本文講解如何使用jQuery實現城市查詢和(hé)日曆顯示的整個(gè)流程。本文用到了jquery ui庫的datepicker插件來(lái)控制(zhì)日曆以及輸入城市提示的插件。

XHTML

 
    出發城市：  
    

    目的城市： 
    
 
 


    出發日期：
    返回日期：

設計(jì)城市和(hé)日期的輸入框，注意使用了div#suggest和(hé)div#suggest2兩個(gè)DIV是用來(lái)顯示城市列表的，默認CSS控制(zhì)為(wèi)不顯示。

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;} 

上(shàng)述樣式主要是控制(zhì)城市查詢的外觀，而日曆控件的樣式我們單獨使用jquery ui的樣式：

jQuery

首先要引用主要javascript：

注意aircity.js是以數(shù)組的形式儲存城市名稱等數(shù)據。j.suggest.js是控制(zhì)輸入查詢城市的，大(dà)家(jiā)可(kě)以直接下載使用。

主要看下頁面使用jQuery。

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

上(shàng)述代碼實現了輸入查詢城市，調用城市數(shù)據的功能。hot_list:commoncitys是指初始的熱門(mén)城市，attachObject:"#suggest"是設置輸入時(shí)關聯的顯示城市列表的DIV。

接下來(lái)要加入控制(zhì)日曆的代碼。

我們需要控制(zhì)日曆的有(yǒu)效日期，即顯示當前日期，在當前日期前的日期都不能選中，因為(wèi)你(nǐ)不可(kě)能選擇已經過去的日期作(zuò)為(wèi)出發日期。還(hái)有(yǒu)就是要顯示連續的兩個(gè)月的日曆。代碼如下：

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");
   }
});

代碼首先獲取了當前日期（即今天），然後初始日期輸入框的內(nèi)容和(hé)樣式，再調用detepicker插件，設置最小(xiǎo)日期為(wèi)當前日期，設置numberOfMonths為(wèi)連續的兩個(gè)月，此外當選擇日期後，調用函數(shù)将輸入框的樣式改變。将以上(shàng)代碼追加到城市輸入查詢代碼的後面即可(kě)。

如此，你(nǐ)的城市和(hé)日期選擇功能已經實現。本文未涉及到日期的驗證，如返回日期不能小(xiǎo)于出發日期，這個(gè)就留給大(dà)家(jiā)去想吧(ba)。