jQuery实现往返城市和日期输入查询

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

本文讲解如何使用jQuery实现城市查询和日历显示的整个流程。本文用到了jquery ui库的datepicker插件来控制日历以及输入城市提示的插件。

查看演示DEMO下载源码

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是控制输入查询城市的，大家可以直接下载使用。

主要看下页面使用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为连续的两个月，此外当选择日期后，调用函数将输入框的样式改变。将以上代码追加到城市输入查询代码的后面即可。

如此，你的城市和日期选择功能已经实现。本文未涉及到日期的验证，如返回日期不能小于出发日期，这个就留给大家去想吧。

声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接，否则视为侵权。