本文使用JQuery来做那些机票预订网站中的输入智能提示功能，这个功能对于用户体验性来说，挺不错的。

先看一下效果图：

本例需要用到的js：点击下载

大家可以下载上面的压缩包，里面包括了jquery-1.4.2.min.js, aircity.js,j.suggest.js,j.dimensions.js.
下面是代码部分。

query.suggest.css

1. body{margin:0;padding:0;font-family:"宋体";font-size:13px;text-align:center;} 
2.  h1{margin:0;padding:20px 0;font-size:16px;} 
3.  ol{padding-left:20px;line-height:130%;} 
4.  #box{width:600px;text-align:left;margin:0 auto;padding-top:80px;} 
5.  #suggest,#suggest2{width:200px;} 
6.  .gray{color:gray;} 
7.  .ac_results {background:#fff;border:1px solid #7f9db9;position: absolute;z-index: 10000;display: none;} 
8.  .ac_results ul{margin:0;padding:0;list-style:none;} 
9.  .ac_results li a{white-space: nowrap;text-decoration:none;display:block;color:#05a;padding:1px 3px;} 
10.  .ac_results li{border:1px solid #fff;} 
11.  .ac_over,.ac_results li a:hover {background:#c8e3fc;} 
12.  .ac_results li a span{float:right;} 
13.  .ac_result_tip{border-bottom:1px dashed #666;padding:3px;} 

head中的代码

1. <title>智能输入提示</title> 
2.  <link rel="stylesheet" type="text/css" href="css/jquery.suggest.css"> 
3.  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
4.  <script type="text/javascript" src="js/j.dimensions.js"></script> 
5.  <script type="text/javascript" src="js/aircity.js"></script> 
6.  <script type="text/javascript" src="js/j.suggest.js"></script> 
7.  <script type="text/javascript"> 
8.  $(function(){ 
9.  $("#arrcity").suggest(citys,{hot_list:commoncitys,dataContainer:'#arrcity_3word',onSelect:function(), attachObject:'#suggest'}); 
10.  $("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"}); 
11.  }); 
12.  </script> 

body中的代码

1. <div id="box"> 
2.  <h1>机票预定智能输入提示DEMO</h1> 
3.  <input type="hidden" name="arrcity_3word" id="arrcity_3word" value="" /> 
4.  <label for="arrcity">出发城市：</label><input type="text" name="arrcity" id="arrcity" /> 
5.  <div id='suggest' class="ac_results"> 
6.  </div> 
7.  <label for="city2">目的城市：</label><input type="text" name="city2" id="city2" /> 
8.  <div id='suggest2' class="ac_results"> 
9.  </div> 
10.  <p>具体的功能如下：</p> 
11.  <ol> 
12.  <li>点击输入框，自动列出热门出行城市；</li> 
13.  <li>支持中文/拼音/3字码 输入的智能提示；</li> 
14.  <li>支持键盘方向键选择、回车键确定；</li> 
15.  <li>支持选择后自定义callback函数；</li> 
16.  <li>支持IE6、IE7、IE8、Firefox</li> 
17.  </ol> 
18.  </div>