JQuery round-trip city and date query example _ jquery

This article explains how to use jQuery to implement the whole process of city query and calendar display. If you need it, you can refer to most travel websites that 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

   Departure city:    
   Target city:   
 
 
 
   Departure Date:   Return date: 
 

The input box for the design city and date. Note that the p # suggest and p # suggest2 divs are used to display the city list. 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;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:

JQuery
First, reference the main javascript: