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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
php 高效率写法 推荐
2010/02/21 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Python回调函数用法实例详解
2015/07/02 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python lxml中etree的简单应用
2019/05/10 Python
Python3 合并二叉树的实现
2019/09/30 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
Flask处理Web表单的实现方法
2021/01/31 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
马丁路德金演讲稿
2014/05/19 职场文书
地道战观后感500字
2015/06/04 职场文书
淮海战役观后感
2015/06/11 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android