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

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

XHTML

<div> <label for="arrcity">出发城市：</label><input type="text" /> <div></div> <label for="city2">目的城市：</label><input type="text" /> <div> </div> </div> <div> <label for="startdate">出发日期：</label><input type="text" /> <label for="enddate">返回日期：</label><input type="text" /> </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 type="text/css" href=#>

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为连续的两个月，此外当选择日期后，调用函数将输入框的样式改变。将以上代码追加到城市输入查询代码的后面即可。
如此，你的城市和日期选择功能已经实现。本文未涉及到日期的验证，如返回日期不能小于出发日期，这个就留给大家去想吧。

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

推荐文章

本页内容版权归属为原作者，如有侵犯您的权益，请通知我们删除。

- 2015-10-11 14:10:22

本文实例讲述了JavaScript子窗口调用父窗口变量和函数的方法。分享给大家供大家参考。具体如下： 示例1：子窗口是新打开的窗口 父窗口: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns=" "head titleparent/title s

使用wordpress的$wpdb类读mysql数据库做ajax时出现的问题该如何解决 - 2015-10-11 14:10:22

无聊做了个 ，技术不过关写不好后台，就想直接读wordpress里的数据。做ajax读后台数据时在网上随便搜了一段代码使用wordpress $wpdb类读mysql数据库，就是这么一随便，搜到了别人的去头去尾的code，开始了我的改错之旅。 主要问题有： 1，non-object 2，json中汉字，/被转码 3，chrome可以正常访问php文件，ie显示http 404，ajax时头部显示404，但是响应正文正确，是我想要的json。 先贴上网上搜到的代码：

不依赖Flash和任何JS库实现文本复制与剪切附源码下载 - 2015-10-11 14:10:05

效果图如下： 我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。 查看演示 下载源码 HTML 首先加载本地clipboard.js文件。 复制代码 代码如下: script src="clipboard.min.js"/script 然后就是在body中加上要复制或剪切的

Jquery中使用show()与hide()方法动画显示和隐藏图片 - 2015-10-11 04:10:27