jQuery中怎么實現(xiàn)往返城市和日期輸入查詢

本篇文章為大家展示了jQuery中怎么實現(xiàn)往返城市和日期輸入查詢，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

HTML

<p class="qline">    <label for="arrcity">出發(fā)城市：</label><input type="text" name="arrcity" class="input" id="arrcity" />      <p id="suggest" class="ac_results"></p>    <label for="city2">目的城市：</label><input type="text" name="city2" class="input" id="city2" />    <p id="suggest2" class="ac_results"> </p> </p> <p class="qline">    <label for="startdate">出發(fā)日期：</label><input type="text" name="startdate" class="input" id="startdate" />    <label for="enddate">返回日期：</label><input type="text" name="enddate" class="input" id="enddate" /> </p>

設(shè)計城市和日期的輸入框，注意使用了p#suggest和p#suggest2兩個DIV是用來顯示城市列表的，默認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是以數(shù)組的形式儲存城市名稱等數(shù)據(jù)。j.suggest.js是控制輸入查詢城市的，大家可以直接下載使用。

主要看下頁面使用jQuery。

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

上述代碼實現(xiàn)了輸入查詢城市，調(diào)用城市數(shù)據(jù)的功能。hot_list:commoncitys是指初始的熱門城市，attachObject:"#suggest"是設(shè)置輸入時關(guān)聯(lián)的顯示城市列表的DIV。

接下來要加入控制日歷的代碼。

我們需要控制日歷的有效日期，即顯示當前日期，在當前日期前的日期都不能選中，因為你不可能選擇已經(jīng)過去的日期作為出發(fā)日期。還有就是要顯示連續(xù)的兩個月的日歷。代碼如下：

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

上述內(nèi)容就是jQuery中怎么實現(xiàn)往返城市和日期輸入查詢，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。