jQuery 往復都市と日付クエリの例 description_jquery

ほとんどの旅行 Web サイトには、都市と日付を入力してクエリを実行する機能が提供されています。ユーザーは入力ボックスに都市のピンインまたは略語を入力するだけで、日付を選択すると 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> 

都市と日付の入力ボックスを設計します。都市リストの表示には 2 つの 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
まず、メインの 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> 

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 は初期の人気のある都市を指し、attachObject:"#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"); 
  } 
}); 

このコードは、まず現在の日付 (つまり、今日) を取得し、次に最初の日付入力ボックスの内容とスタイルを取得してから、detepicker プラグインを呼び出し、最小日付を現在の日付に設定し、numberOfMonths を連続する 2 つの日付に設定します。さらに、日付が選択されている場合は、入力ボックスのスタイルを変更する関数を呼び出します。上記のコードを都市入力クエリ コードに追加するだけです。
これで、都市と日付の選択機能が実装されました。この記事には日付の確認は含まれていません。帰国日を出発日よりも前にすることはできませんが、これについては各自で考えてください。

上記は、jQuery を使用して都市クエリとカレンダー表示を実装する方法の全体的なプロセスです。皆さんの学習に役立つことを願っています。