机票城市选择下拉菜单效果 带智能输入提示

预览效果

1. 点击输入框，自动列出热门出行城市；
2. 支持中文/拼音/3字码 输入的智能提示；
3. 支持键盘方向键选择、回车键确定；
4. 支持选择后自定义callback函数；

HTML代码

<input type="hidden" name="arrcity_3word" id="arrcity_3word" value="" />
<label for="arrcity">出发城市：</label><input class="input-text" type="text" name="arrcity" id="arrcity" />
<div id="suggest" class="ac_results"></div>
<label for="city2">目的城市：</label><input class="input-text" type="text" name="city2" id="city2" />
<div id='suggest2' class="ac_results"> </div>

CSS代码

#suggest, #suggest2 {width:200px}
.gray {color:gray}
.ac_results {background:#fff;border:1px solid #7f9db9;position: absolute;z-index: 10000;display: 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}

JS代码

<script type="text/javascript" src="/lib-h-ui-net/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="airCity.js"></script>
<script type="text/javascript" src="dimensions.js"></script>
<script type="text/javascript" src="suggest.js"></script>

页面引用

$(function(){
  $("#arrcity").suggest(citys,{hot_list:commoncitys,dataContainer:'#arrcity_3word',onSelect:function(){$("#city2").click()},attachObject:'#suggest'});
  $("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"})});