JQuery实现智能输入提示（仿机票预订网站）

 连接：

http://www.cnblogs.com/kyle_zhao/archive/2010/02/27/1674819.html

JQuery实现智能输入提示（仿机票预订网站）

    最近在研究JQuery框架，JQuery是一套很优秀的JS框架，可以实现很多美观实用的控件。今天给大家推荐一个智能提示的空间，是模仿现在很多机票预订网站的城市智能提示。

    注： aircity.js把城市信息数据封装成了JOSN数组，js能解析josn从而获得需要的数据。

  

    需要用到的JS文件：http://files.cnblogs.com/kyle_zhao/js.rar 

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

    下面是代码部分。

    jquery.suggest.css

    

jquery.suggest.css

body { margin : 0 ; padding : 0 ; font-family : "宋体" ; font-size : 13px ; text-align : center ; }
h1 { margin : 0 ; padding : 20px 0 ; font-size : 16px ; }
ol { padding-left : 20px ; line-height : 130% ; }
#box { width : 600px ; text-align : left ; margin : 0 auto ; padding-top : 80px ; }
#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 ; }
.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 ; }

 

 

 

head中的代码

 

head

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

 

 

body中的代码

 

代码

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

 

以上是很好的人提供的代码 很感谢 但是在这个基础上遇到的几个问题 我想分享 分享

********************************************************

1.问题就是  asp.net 页面回车触发button按钮事件  所以不多说

********************************************************

2问题： 在查询的时候这些数据是从一个js的数组里面取的 但是我们项目里面需要从数据库里面取出来的 所以做了一下操作来替代了里面声明数组的哪个js：

在页面初始的时候调用这段代码 就从数据库里面取了

 

代码

  // 从数据库取出城市列表
     public   void  Gecitytlist()
    {
        DataTable dt  =   new  AirportSystem().GetAirport( null ,  null );  //此方法就是从数据库取出来的城市列表 包括拼音 汉字 和三字代码
         if  (dt  !=   null   &&  dt.Rows.Count  >   0 )
        {
             // commoncitys[0]=new Array('SZX','深圳','SHENZHEN','SZ');
            StringBuilder sb  =   new  StringBuilder();
            sb.Append( " <script type='text/javascript'> " );
            sb.Append( " var commoncitys=new Array(); " );

             for  (Int32 i  =   0 ; i  <   15 ; i ++ )
            {
                sb.Append( " commoncitys[ "   +  i  +   " ]=new Array(' "   +  dt.Rows[i][ " Code " ]  +   " ',' "   +  dt.Rows[i][ " CName " ]  +   " ',' "   +  dt.Rows[i][ " EName " ]  +   " '); " );
            }

            sb.Append( " var citys=new Array(); " );

             for  (Int32 i  =   0 ; i  <  dt.Rows.Count; i ++ )
            {
                sb.Append( " citys[ "   +  i  +   " ]=new Array(' "   +  dt.Rows[i][ " Code " ]  +   " ',' "   +  dt.Rows[i][ " CName " ]  +   " ',' "   +  dt.Rows[i][ " EName " ]  +   " '); " );
            }

            sb.Append( " </script> " );

            Page.ClientScript.RegisterStartupScript( typeof (String),  " Array " , sb.ToString());
        }
    }

 

 

 

3********************************************************

在我将这个做成用户控件的时候 也出现了小小的插曲 因为我将hidden设置为了ruant=“server” 所以id就变成了控件的id_本身的id

这样就没问题

 

 

这个就是我做这个的感想 分享分享 谢谢 呵呵

转载于:https://www.cnblogs.com/wanglinglong/archive/2010/03/18/1689050.html