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

大多旅游网站上都提供了一个城市和日期输入查询的功能。用户在输入框中只需输入城市的拼音或者简称就可以即时查询到相关城市的名称，选择日期时则是出现两个月的日历控件，只需点选日期即可，整个操作简捷明了。
本文用到了jquery ui库的datepicker插件来控制日历以及输入城市提示的插件。

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> 

设计城市和日期的输入框，注意使用了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的样式：

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

jQuery
首先要引用主要javascript：

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

注意aircity.js是以数组的形式储存城市名称等数据。j.suggest.js是控制输入查询城市的，大家可以直接下载使用。