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 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
Js面试算法详解
Apr 08 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 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
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
个人贷款承诺书
2014/03/28 职场文书
运动会班级口号
2014/06/09 职场文书
入党政审材料范文
2014/12/24 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server