jQuery aller-retour ville et exemple de requête de date explication_jquery

La plupart des sites Web de voyage proposent une fonction permettant de saisir une ville et une date à interroger. Les utilisateurs n'ont qu'à saisir le pinyin ou l'abréviation de la ville dans la zone de saisie pour interroger instantanément le nom de la ville concernée. Lors de la sélection d'une date, un contrôle de calendrier de deux mois apparaîtra. L'ensemble de l'opération est. simple et clair.
Cet article utilise le plug-in datepicker de la bibliothèque jquery ui pour contrôler le calendrier et accéder au plug-in d'invite de ville.

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> 

Concevez la zone de saisie pour la ville et la date. Notez que deux DIV, div#suggest et div#suggest2, sont utilisés pour afficher la liste des villes. Le contrôle CSS par défaut ne doit pas s'afficher.
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;} 

Les styles ci-dessus sont principalement utilisés pour contrôler l'apparence de la requête de ville, et pour le style du contrôle du calendrier, nous utilisons seul le style jquery ui : ​​

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

jQuery
Tout d’abord, citez le javascript principal :

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

Notez qu'aircity.js stocke des données telles que les noms de villes sous forme de tableaux. j.suggest.js contrôle la saisie et la requête des villes. Vous pouvez le télécharger et l'utiliser directement.
Regardez principalement la page en utilisant jQuery.

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

Le code ci-dessus implémente la fonction de saisie et d'interrogation des villes et d'appel des données de la ville. hot_list:commoncitys fait référence aux villes populaires initiales et attachObject:"#suggest" est le DIV associé à la liste des villes lors de la définition de l'entrée.
Ensuite, nous devons ajouter le code pour contrôler le calendrier.
Nous devons contrôler la date d'entrée en vigueur du calendrier, c'est-à-dire afficher la date actuelle. Les dates antérieures à la date actuelle ne peuvent pas être sélectionnées car vous ne pouvez pas sélectionner une date déjà passée comme date de départ. Il existe également un calendrier à afficher pendant deux mois consécutifs. Le code est le suivant :

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

Le code obtient d'abord la date actuelle (c'est-à-dire aujourd'hui), puis le contenu et le style de la zone de saisie de la date initiale, puis appelle le plug-in detepicker, définit la date minimale sur la date actuelle et définit numberOfMonths sur deux mois consécutifs. mois De plus, lorsque la date est sélectionnée, appelez la fonction pour changer le style de la zone de saisie. Ajoutez simplement le code ci-dessus au code de requête d’entrée de la ville.
Ainsi, votre fonctionnalité de sélection de ville et de date a été implémentée. Cet article ne comporte pas de vérification de date. Si la date de retour ne peut être inférieure à la date de départ, c'est à chacun d'y réfléchir.

Ce qui précède représente l'ensemble du processus d'utilisation de jQuery pour implémenter la requête de ville et l'affichage du calendrier. J'espère que cela sera utile à l'apprentissage de chacun.