本篇文章为大家展示了jQuery中怎么实现往返城市和日期输入查询，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
<p class="qline">
<label for="arrcity">出发城市：</label><input type="text" name="arrcity" class="input"
id="arrcity" />
<p id="suggest" class="ac_results"></p>
<label for="city2">目的城市：</label><input type="text" name="city2" class="input"
id="city2" />
<p id="suggest2" class="ac_results"> </p>
</p>
<p 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" />
</p>
设计城市和日期的输入框，注意使用了p#suggest和p#suggest2两个DIV是用来显示城市列表的，默认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" />
首先要引用主要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");
}
});
上述内容就是jQuery中怎么实现往返城市和日期输入查询，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
