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 

 

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 

 

 

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 >

转载于:https://www.cnblogs.com/tangself/archive/2010/03/01/1675902.html