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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
详谈for循环里面的break和continue语句
Jul 20 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
vue+element UI实现树形表格
Dec 29 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无限分类的类
2007/01/02 PHP
php auth_http类库进行身份效验
2009/03/19 PHP
php HandlerSocket的使用
2011/05/02 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python实现维吉尼亚加密法
2019/03/20 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
python GUI计算器的实现
2020/10/09 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
英国网上花店:Bunches
2016/11/29 全球购物
介绍一下gcc特性
2015/10/31 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
计算机应用职专应届生求职信
2013/11/12 职场文书
采购经理岗位职责
2014/02/16 职场文书
聚美优品广告词改编
2014/03/14 职场文书
大学生求职计划书
2014/04/30 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
2016新年问候语大全
2015/11/11 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
德劲DE1105机评
2022/04/05 无线电