使用bootstrap和jQuery制作下拉输入框

总体思路：
1. 使用html的datalist标签，实现模糊查询功能。
2. 但datalist的下拉列表没有找到滚动修改的方法，故自己制作一个下拉列表，使用bootstrap的下拉菜单组件 .dropdown，并将样式保持一致，且在聚焦时停用datalist的列表。

关于浏览器兼容问题，测试与datalist所支持的一致，IE 10、Firefox、Opera 和 Chrome 支持。

效果图：

核心代码如下：
html:
引入：

<script type="text/javascript" src="js/jquery-1.11.3-min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<div class="form-group margin_top_15">
                <label class="col-md-3 control-label">所在地区</label>
                <div class="col-md-9">
                    <div class="input-group select_bar" id="province">
                        <input type="text" onfocus="onProvinceFocus()" onkeydown="onProvinceKey()" onchange="onProvinceChange()"
                        list="provinceInput" class="form-control sel_input">
                        <datalist id="provinceInput"></datalist>
                        <div class="input-group-btn sel_btn">
                            <ul class="dropdown-menu">
                                <li onclick="onProvinceClick();"><a>请选择</a></li>
                            </ul>
                            <button class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                        </div>
                    </div>
                    <div class="input-group select_bar" id="city">
                        <input type="text" onchange="onCityChange()" onfocus="onCityFocus()" onkeydown="onCityKey()"
                            list="cityInput" class="form-control sel_input">
                            <datalist id="cityInput"></datalist>
                            <div class="input-group-btn sel_btn">
                                <ul class="dropdown-menu">
                                    <li onclick="onCityClick();"><a>请选择</a></li>
                                </ul>
                                <button class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                            </div>
                    </div>
                    <div class="input-group select_bar" id="area"
                        errortips="请选择或填写正确的地区信息">
                        <input type="text" onchange="onAreaChange()" onfocus="onAreaFocus()" onkeydown="onAreaKey()"
                            list="areaInput" class="form-control sel_input">