本文用到了jquery ui库的datepicker插件来控制日历以及输入城市提示的插件。
xhtml
出发城市：
目的城市：
出发日期： 返回日期：
设计城市和日期的输入框，注意使用了div#suggest和div#suggest2两个div是用来显示城市列表的，默认css控制为不显示。
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;}
上述样式主要是控制城市查询的外观，而日历控件的样式我们单独使用jquery ui的样式：
jquery
首先要引用主要javascript：
注意aircity.js是以数组的形式储存城市名称等数据。j.suggest.js是控制输入查询城市的，大家可以直接下载使用。
主要看下页面使用jquery。
$(function(){ $(#arrcity).suggest(citys,{ hot_list:commoncitys, attachobject:#suggest }); $(#city2).suggest(citys,{ hot_list:commoncitys, attachobject:#suggest2 }); });
上述代码实现了输入查询城市，调用城市数据的功能。hot_list:commoncitys是指初始的热门城市，attachobject:#suggest是设置输入时关联的显示城市列表的div。
接下来要加入控制日历的代码。
我们需要控制日历的有效日期，即显示当前日期，在当前日期前的日期都不能选中，因为你不可能选择已经过去的日期作为出发日期。还有就是要显示连续的两个月的日历。代码如下：
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); } });
代码首先获取了当前日期（即今天），然后初始日期输入框的内容和样式，再调用detepicker插件，设置最小日期为当前日期，设置numberofmonths为连续的两个月，此外当选择日期后，调用函数将输入框的样式改变。将以上代码追加到城市输入查询代码的后面即可。
如此，你的城市和日期选择功能已经实现。本文未涉及到日期的验证，如返回日期不能小于出发日期，这个就留给大家去想吧。
以上就是如何使用jquery实现城市查询和日历显示的整个流程，希望对大家的学习有所帮助。