机票城市选择下拉菜单效果 带智能输入提示
预览效果
- 点击输入框,自动列出热门出行城市;
- 支持中文/拼音/3字码 输入的智能提示;
- 支持键盘方向键选择、回车键确定;
- 支持选择后自定义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"})});