JQuery插件Suggest，实现类百度智能提示(一.使用举例 1. query.suggest.css 页面样式 2.head中的代码 3.body中的代码：)

二.在项目中的格式视图

JQuery插件Suggest，实现类百度智能提示

介绍：JQuery插件Suggest来做那些机票预订网站中的输入智能提示功能，这个功能对于用户体验性来说，挺不错的,用于实现类似百度的智能提示功能也是一个不错的选择，实现效果如图1：

一.使用举例

1. query.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;}

2.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(){}, attachObject:'#suggest'});

$("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"});

});

</script>

3.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>

二.在项目中的格式视图

1.aircity.js 代码格式：