JQuery round-trip city and date query examples, jquery date Query

JQuery round-trip city and date query examples, jquery date Query

Most travel websites provide a city and Date input query function. In the input box, you only need to enter the pinyin or abbreviation of the city to instantly query the name of the city. When you select a date, the calendar Control for two months appears. You only need to click the date, the entire operation is simple and clear.
This article uses the datepicker plug-in of the jquery ui library to control the calendar and input the city prompts.

XHTML

<Div class = "qline"> <label for = "arrcity"> departure city: </label> <input type = "text" name = "arrcity" class = "input" id = "arrcity"/> <div id = "suggest" class = "ac_results"> </div> <label for = "city2"> Target city: </label> <input type = "text" name = "city2" class = "input" id = "city2"/> <div id = "suggest2" class = "ac_results"> </div> <div class = "qline"> <label for = "startdate"> departure date: </label> <input type = "text" name = "startdate" class = "input" id = "startdate"/> <label for = "enddate"> return date: </label> <input type = "text" name = "enddate" class = "input" id = "enddate"/> </div>

Design the input box of city and date. Note that div # suggest and div # suggest2 are used to display the city list. By default, CSS control is disabled.
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;} 

The above style mainly controls the appearance of city queries, while the style of the calendar control uses the jquery ui style separately:

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

JQuery
First, reference the main 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> 

Note that aircity. js stores city name and other data in an array. J. suggest. js controls the input and query cities. You can download and use it directly.
The following describes how to use jQuery on the page.

$(function(){   $("#arrcity").suggest(citys,{     hot_list:commoncitys,     attachObject:"#suggest"   });   $("#city2").suggest(citys,{     hot_list:commoncitys,     attachObject:"#suggest2"   }); }); 

The code above allows you to enter and query the city and call the city data function. Hot_list: commoncitys is the initial popular city. attachObject: "# suggest" is the DIV associated with the display city list when the input is set.
Add the code to control the calendar.
We need to control the calendar's effective date, that is, to display the current date. The date before the current date cannot be selected, because you cannot select the past date as the departure date. In addition, the calendar of two consecutive months must be displayed. The Code is as follows:

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");   } }); 

The code first obtains the current date (today), then the content and style of the initial date input box, then calls the detepicker plug-in, sets the minimum date to the current date, and sets numberOfMonths to two consecutive months, in addition, when the date is selected, call the function to change the style of the input box. Append the above Code to the end of the city input query code.
In this way, your city and date selection functions have been implemented. This article does not involve date verification. For example, if the return date cannot be less than the departure date, leave it to everyone.

The above is how to use jQuery to implement the whole process of city query and calendar display. I hope it will be helpful for you to learn.