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

可扩展的超文本标记语言

div class='qline '标签为='arrcity '出发城市：/label input type=' text ' name=' arr city ' class=' input ' id=' arr city '/div id=' advice ' class=' AC _ results '/div label for=' city '目的城市：/labelinput type=' text ' name=' city ' class=' input ' id=' city '/div id=' advice T2 ' class=' AC _ results '/div/div class=' “开始日期”的“qline”标签出发日期：/labelinput type=' text ' name=' start date ' class=' input ' id=' start date '/label for=' end date '返回日期：/labelinput type=' text ' name=' end date ' class=' input ' id=' end date '/div设计城市和日期的输入框，注意使用了div #建议和div #建议2两个差异是用来显示城市列表的，默认半铸钢钢性铸铁(铸造半钢)控制为不显示CSS。输入{border:1px实线#999}。qline {行高：24 pxmargin:10px } #建议，建议{ width:200px}。灰色{ color:gray}。AC _ results {背景： # fffborder:1px固体# 7f 9 db 9绝对位置：z指数：10000;显示器：无；} .ac _ results ul { margin:0划水：0;列表式：无；} .ac _结果阿利{空白： nowrap文本装饰：无；显示：块；color : # 05 apadding :1 px 3px }。AC _ results Li {边框：1 px实心# fff线高：18px} .交流完毕.AC _ results阿利：悬停{背景： # c8e3 fc} .ac _结果阿利span { float:right}。交流_结果_提示{边框-底部：1像素虚线# 666;padding:3px }上述样式主要是控制城市查询的外观，而日历控件的样式我们单独使用jquery用户界面的样式：

链接rel='样式表type=' text/CSS ' href=' CSS/jQuery-ui。CSS '/jQuery首先要引用主要javascript:

脚本类型=' text/JavaScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' src=' http : js/jquery-ui。js '/script脚本类型=' text/JavaScript ' src=' http : js/aircity。js '/script脚本类型=' text/JavaScript ' src=' http 3360 js/j。建议。注意aircity.js是以数组的形式储存城市名称等数据j。建议。js。是控制输入查询城市的，大家可以直接下载使用。主要看下页面使用jQuery。

$(function(){ $(“# arr city”)).建议（城市，{ hot _ list:commoncitys，attachObject: ' #建议' });$('#city ').建议（城市，{ hot _ list:commoncitys，attachObject: ' #建议2 ' });});上述代码实现了输入查询城市，调用城市数据的功能hot _ list:commoncitys是指初始的热门城市，附件对象： ' #建议'是设置输入时关联的显示城市列表的DIV。接下来要加入控制日历的代码。我们需要控制日历的有效日期，即显示当前日期，在当前日期前的日期都不能选中，因为你不可能选择已经过去的日期作为出发日期。还有就是要显示连续的两个月的日历。代码如下：

today=新日期()；var year=today . getfullyear()；var month=today . getmonth()；var day=today . getdate()；$('#startdate，#enddate ')。css('color '，' #aaa ')。attr('value '，' yyyy-mm-DD ')；$('#startdate，#enddate ')。Date picker({ mindate : new Date(年、月、日1)，numberOfMonths: 2，onClose:function(){ $(this)。css('color '，' # 000 ')；} });首先，代码获取当前日期(即今天)，然后获取初始日期输入框的内容和样式，然后调用detepicker插件，将最小日期设置为当前日期，将月数设置为连续两个月。此外，选择日期后，会调用函数来更改输入框的样式。将上述代码添加到城市输入查询代码的后面。这样就实现了你的城市和日期选择功能。本文不涉及日期验证。如果返程日期不能早于出发日期，那就让大家考虑一下。

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