jQuery 왕복 도시 및 날짜 쿼리 예제 explain_jquery

대부분의 여행 웹사이트에서는 쿼리할 도시와 날짜를 입력하는 기능을 제공합니다. 사용자는 입력란에 도시의 병음이나 약어만 입력하면 해당 도시의 이름을 즉시 쿼리할 수 있으며, 날짜를 선택하면 2개월 달력 컨트롤이 나타납니다. 간단하고 명확합니다.
이 기사에서는 jquery ui 라이브러리의 datepicker 플러그인을 사용하여 달력을 제어하고 도시 프롬프트 플러그인을 입력합니다.

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> 

도시 및 날짜에 대한 입력 상자를 디자인합니다. div#suggest 및 div#suggest2는 도시 목록을 표시하는 데 사용됩니다. 기본 CSS 컨트롤은 표시되지 않습니다.
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;} 

위 스타일은 주로 도시 쿼리의 모양을 제어하는 ​​데 사용되며, 달력 제어의 스타일은 jquery ui 스타일만 사용합니다. ​​

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

jQuery
먼저 주요 자바스크립트를 인용하세요:

<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> 

aircity.js는 도시 이름과 같은 데이터를 배열 형태로 저장한다는 점에 유의하세요. j.suggest.js는 도시의 입력과 쿼리를 직접 다운로드하여 사용할 수 있습니다.
주로 jQuery를 사용하여 페이지를 봅니다.

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

위 코드는 도시를 입력하고 조회하고 도시 데이터를 호출하는 기능을 구현한 것입니다. hot_list:commoncitys는 초기 인기 도시를 참조하고, attachmentObject:"#suggest"는 입력 설정 시 도시 목록과 연관된 DIV입니다.
다음으로 달력을 제어하는 ​​코드를 추가해야 합니다.
달력의 유효일자, 즉 현재 날짜를 제어해야 하는데, 이미 지나간 날짜를 출발일로 선택할 수 없기 때문에 현재 날짜 이전의 날짜는 선택할 수 없습니다. 2개월 연속 표시되는 달력도 있습니다. 코드는 다음과 같습니다.

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

코드는 먼저 현재 날짜(즉, 오늘)를 얻은 다음 초기 날짜 입력 상자의 내용과 스타일을 얻은 다음 탐지기 플러그인을 호출하고 최소 날짜를 현재 날짜로 설정하며 numberOfMonths를 2연속으로 설정합니다. 또한, 날짜를 선택한 경우 입력창의 스타일을 변경하는 함수를 호출합니다. 위의 코드를 도시 입력 쿼리 코드에 추가하면 됩니다.
따라서 도시 및 날짜 선택 기능이 구현되었습니다. 이 기사에는 날짜 확인이 포함되지 않습니다. 귀국 날짜가 출발 날짜보다 이전일 수 없는 경우 이는 모두가 생각해 볼 수 있습니다.

이상은 jQuery를 사용하여 도시 쿼리 및 달력 표시를 구현하는 전체 과정입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.