jQuery往返城市和日期查询实例讲解_jquery

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。

上述代码实现了输入查询城市，调用城市数据的功能。hot_list:commoncitys是指初始的热门城市，attachObject:"#suggest"是设置输入时关联的显示城市列表的DIV。
接下来要加入控制日历的代码。
我们需要控制日历的有效日期，即显示当前日期，在当前日期前的日期都不能选中，因为你不可能选择已经过去的日期作为出发日期。还有就是要显示连续的两个月的日历。代码如下：

代码首先获取了当前日期（即今天），然后初始日期输入框的内容和样式，再调用detepicker插件，设置最小日期为当前日期，设置numberOfMonths为连续的两个月，此外当选择日期后，调用函数将输入框的样式改变。将以上代码追加到城市输入查询代码的后面即可。
如此，你的城市和日期选择功能已经实现。本文未涉及到日期的验证，如返回日期不能小于出发日期，这个就留给大家去想吧。

以上就是如何使用jQuery实现城市查询和日历显示的整个流程，希望对大家的学习有所帮助。