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

 更新时间:2015年10月09日 11:23:50   投稿:lijiao  
本文讲解如何使用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是控制输入查询城市的,大家可以直接下载使用。
主要看下页面使用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实现城市查询和日历显示的整个流程,希望对大家的学习有所帮助。

相关文章

  • jQuery子属性过滤选择器用法分析

    jQuery子属性过滤选择器用法分析

    这篇文章主要介绍了jQuery子属性过滤选择器用法,实例分析了:first-child、:last-child、:nth-child、:only-chilid等子属性过滤选择器使用技巧,需要的朋友可以参考下
    2015-02-02
  • jquery判断至少有一个checkbox被选中的方法

    jquery判断至少有一个checkbox被选中的方法

    这篇文章主要介绍了jquery判断至少有一个checkbox被选中的方法,涉及jQuery操作checkbox控件的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jquery实现左右滑动菜单效果代码

    jquery实现左右滑动菜单效果代码

    这篇文章主要介绍了jquery实现左右滑动菜单效果代码,涉及jquery鼠标事件及页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery实现移动端笔触canvas电子签名

    jQuery实现移动端笔触canvas电子签名

    这篇文章主要为大家详细介绍了jQuery实现移动端笔触canvas电子签名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • jQuery学习笔记 操作jQuery对象 文档处理

    jQuery学习笔记 操作jQuery对象 文档处理

    HTML文档的层次关系是树型的,每个标签可视为树的各个节点。若操作jQuery对象,使得HTML文档的结构发生了改变,就叫做文档处理
    2012-09-09
  • jQuery延迟加载图片插件Lazy Load使用指南

    jQuery延迟加载图片插件Lazy Load使用指南

    在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占了几百K的空间。那么我们如何才能改变这种状况呢,这就是今天我们要探讨的问题了。
    2015-03-03
  • 利用jquery如何从json中读取数据追加到html中

    利用jquery如何从json中读取数据追加到html中

    这篇文章主要给大家介绍了关于利用jquery如何从json中读取数据追加到html中的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编一起来看看吧。
    2017-12-12
  • JQuery 确定css方框模型(盒模型Box Model)

    JQuery 确定css方框模型(盒模型Box Model)

    做过前台设置的都知道css存在两种盒模型,W3C标准的方框模型和IE浏览器的方框模型。除IE以外的大多数浏览器只支持W3C方框模型。IE浏览器能够根据页面的呈现模式的定义而是用对性的方框模式。已用哪中呈现的模式取决于页面上的DOCTYPE的声明。
    2010-01-01
  • 解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题

    解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题

    这篇文章主要介绍了解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • jquery移动节点实例

    jquery移动节点实例

    这篇文章主要介绍了jquery移动节点的实现方法,主要涉及append()方法的使用技巧,需要的朋友可以参考下
    2015-01-01

最新评论