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

预览效果

  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="http://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"});
});

打包下载