Beispiel für eine jQuery-Roundtrip-Stadt- und Datumsabfrage erklärt_jquery

Die meisten Reisewebsites bieten eine Funktion zur Eingabe einer Stadt und eines Datums zur Abfrage. Benutzer müssen lediglich das Pinyin oder die Abkürzung der Stadt in das Eingabefeld eingeben, um sofort den Namen der entsprechenden Stadt abzufragen. Wenn Sie ein Datum auswählen, wird einfach auf das Datum geklickt einfach und klar.
In diesem Artikel wird das Datepicker-Plug-In der JQuery-UI-Bibliothek verwendet, um den Kalender zu steuern und das City-Prompt-Plug-In einzugeben.

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> 

Entwerfen Sie das Eingabefeld für Stadt und Datum. Beachten Sie, dass zwei DIVs, div#suggest und div#suggest2, zur Anzeige der Städteliste verwendet werden.
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;} 

Die oben genannten Stile werden hauptsächlich zur Steuerung des Erscheinungsbilds der Stadtabfrage verwendet. Für den Stil der Kalendersteuerung verwenden wir ausschließlich den JQuery-UI-Stil: ​​

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

jQuery
Zitieren Sie zunächst das Haupt-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> 

Beachten Sie, dass aircity.js Daten wie Städtenamen in Form von Arrays speichert. j.suggest.js steuert die Eingabe und Abfrage von Städten. Sie können es herunterladen und direkt verwenden.
Schauen Sie sich die Seite hauptsächlich mit jQuery an.

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

Der obige Code implementiert die Funktion zum Eingeben und Abfragen von Städten und zum Aufrufen von Stadtdaten. hot_list:commoncitys bezieht sich auf die anfänglichen beliebten Städte und attachmentObject:"#suggest" ist der DIV, der beim Festlegen der Eingabe mit der Städteliste verknüpft ist.
Als nächstes müssen wir den Code hinzufügen, um den Kalender zu steuern.
Wir müssen das Gültigkeitsdatum des Kalenders steuern, d. h. das aktuelle Datum anzeigen. Daten vor dem aktuellen Datum können nicht ausgewählt werden, da Sie kein Datum auswählen können, das bereits vergangen ist. Es gibt auch einen Kalender, der für zwei aufeinanderfolgende Monate angezeigt werden kann. Der Code lautet wie folgt:

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

Der Code ruft zuerst das aktuelle Datum (d. h. heute) ab, dann den Inhalt und Stil des ursprünglichen Datumseingabefelds, ruft dann das Detepicker-Plug-In auf, setzt das Mindestdatum auf das aktuelle Datum und setzt numberOfMonths auf zwei aufeinanderfolgende Rufen Sie außerdem bei Auswahl des Datums die Funktion auf, um den Stil des Eingabefelds zu ändern. Hängen Sie einfach den obigen Code an den Eingabeabfragecode für die Stadt an.
Damit wurde Ihre Funktion zur Stadt- und Datumsauswahl implementiert. In diesem Artikel geht es nicht um eine Datumsüberprüfung. Wenn das Rückreisedatum nicht vor dem Abreisedatum liegen darf, bleibt es jedem überlassen, darüber nachzudenken.

Das Obige ist der gesamte Prozess der Verwendung von jQuery zur Implementierung von Stadtabfragen und Kalenderanzeigen. Ich hoffe, dass es für das Lernen aller hilfreich ist.