jQuery round trip city and date query example explanation_jquery

Most travel websites provide a function for entering a city and date to query. Users only need to enter the pinyin or abbreviation of the city in the input box to instantly query the name of the relevant city. When selecting a date, a two-month calendar control will appear. Just click on 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 enter the city prompt plug-in.

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> 

Design the input box for city and date. Note that two DIVs, div#suggest and div#suggest2, are used to display the city list. The default CSS control is not to display.
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 styles are mainly used to control the appearance of the city query, and for the style of the calendar control, we use the jquery ui style alone: ​​

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

jQuery
First, quote 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 data such as city names in the form of arrays. j.suggest.js controls the input and query of cities. You can download and use it directly.
Mainly look at 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 function of inputting and querying cities and calling city data. hot_list:commoncitys refers to the initial popular cities, and attachObject:"#suggest" is the DIV associated with the city list when setting the input.
Next we need to add the code to control the calendar.
We need to control the effective date of the calendar, that is, display the current date. Dates before the current date cannot be selected because you cannot select a date that has already passed as the departure date. There is also a calendar to display for two consecutive months. 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 (i.e. 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. Just append the above code to the city input query code.
So, your city and date selection functionality has been implemented. This article does not involve date verification. If the return date cannot be less than the departure date, this is left to everyone to think about.

The above is the entire process of how to use jQuery to implement city query and calendar display. I hope it will be helpful to everyone's learning.