JQuery实现智能输入提示（仿机票预订网站）
需要用到的JS文件：/Files/kyle_zhao/js.rar
大家可以下载上面的压缩包，里面包括了jquery-1.4.2.min.js, aircity.js,j.suggest.js,j.dimensions.js.
下面是代码部分。
jquery.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;}
14
15
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;}
14
15
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(){$("#city2").click();}, attachObject:'#suggest'});
10 $("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"});
11 });
12 </script>
13
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(){$("#city2").click();}, attachObject:'#suggest'});
10 $("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"});
11 });
12 </script>
13
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>
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>
