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


Posted in Javascript onOctober 09, 2015

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

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

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

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

Javascript 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
javascript void(0)的妙用
Oct 21 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 #Javascript
jQuery实现连续动画效果实例分析
Oct 09 #Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 #Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 #Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 #Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 #Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 #Javascript
You might like
我的论坛源代码(七)
2006/10/09 PHP
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php实现简单洗牌算法
2013/06/18 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
python中的字典使用分享
2016/07/31 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
python 进程池pool使用详解
2020/10/15 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
大学生职业生涯规划范文
2014/01/22 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
小学端午节活动总结
2015/02/11 职场文书
人身损害赔偿协议书
2016/03/22 职场文书