jquery roundtrip city and date query examples explain _jquery

Most travel sites provide a city and date input query function. Users in the input box just enter the city's pinyin or short name can immediately query the names of the relevant city, select the date is a two-month calendar control, just click on the date, the entire operation simple and clear.
This article uses the DatePicker plug-in of the jquery UI library to control the calendar and the plug-in for entering the city hints.

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" > Destination City: </label><input type= "text" name= "city2" class= "input" 
id= "City2"/> <div 
  ID = "Suggest2" class= "Ac_results" > </div> 
</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 "/> 

Design the city and date of the input box, note that using the div#suggest and Div#suggest2 two div is used to display the list of cities, the default CSS control is not displayed.
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;p Osition: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;p adding: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;p adding:3px;} 

The style above mainly controls the appearance of the city query, and the style of the Calendar control we use the jquery UI style individually:

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

Jquery
First, you 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 the aircity.js is stored as an array of data such as city names. J.suggest.js is the control input query city, you can directly download the use.
Mainly look down the page using jquery.

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

The above code implements the input query city, the function that calls the city data. Hot_list:commoncitys is the initial hot city, Attachobject: "#suggest" is the div that sets the list of displayed cities associated with the input.
Next you want to add the code that controls the calendar.
We need to control the calendar's valid date, that is, the current date is displayed, and the date before the current date cannot be selected because you cannot choose a date that is already past as the departure date. There is a continuous two-month calendar to display. 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 gets the current date (that is, today), and then the initial date enters the contents and style of the box, then calls the Detepicker plug-in, sets the minimum date to the current date, sets the numberofmonths to two consecutive months, and when the date is selected, the calling function changes the style of the input box. Append the above code to the city input query code.
So, your city and date selection function has been implemented. This article does not relate to the date of validation, such as the return date can not be less than the departure date, this is left to everyone to think about it.

The above is how to use jquery to implement the whole process of city query and calendar display, hope to help everyone's study.