This article explains how to use jquery to implement the entire process of city query and calendar display.

Most travel websites provide a city and date input query function.Users only need to input the pinyin or short name of the city in the input box, and they can instantly find the name of the relevant city.When you select a date, a two-month calendar control appears.Just click on the date.The whole operation is 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 city prompts.


  <label for="arrcity">Departure city:</label><input type="text" name="arrcity"
id="arrcity" />
  <label for="city2">destination city:</label><input type="text" name="city2"
id="city2" />
  <label for="startdate">Departure date:</label><input type="text" name="startdate"
id="startdate" />
  <label for="enddate">Return Date:</label><input type="text" name="enddate"
id="enddate" />

Design input fields for cities and dates,Note that the two div #suggest and div #suggest2 are used to display the city list.The default css control is not displayed.


.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;
.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.And the style of the calendar control we use the style of jquery ui alone:

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


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 an array.j.suggest.js is the control input query city,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 input query city,Call the function of city data.hot_list:commoncitys refers to the initial hot cities,attachobject:"#suggest" is the div that displays the list of cities associated with the input.

Next comes the code that controls the calendar.

We need to control the effective date of the calendar,The current date is displayed,You cannot select a date before the current date.Because you cannot choose a date that has already passed as the departure date.There is also a calendar showing two consecutive months.code show as below:

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 (i.e. today), then the content and style of the initial date input box,Then call the detepicker plugin, set the minimum date to the current date,Set numberofmonths to two consecutive months,Also when selecting a date,Call the function to change the style of the input box.Just add the above code after the city input query code.

In this way, your city and date selection function has been implemented.This article does not cover date validation.If the return date cannot be less than the departure date,This is for everyone to think about.

  • Previous Application of PHP + jQuery + Ajax to achieve pagination effect jPaginate plugin
  • Next jQuery implements a sliding window effect that mimics the homepage's induction mouse changes