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

连接：

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

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

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

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

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

下面是代码部分。

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

这样就没问题

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