百度地圖web 關鍵字輸入智能提示 省市區限制

百度地圖web api 輸入關鍵字提示僅僅給了一個很簡單的demo，而且并未提供任何條件限制的api，今天遇到了個比較難受的問題是，網站本身是省市級3級區域選擇，然後後面輸入詳細位址後要在百度地圖上顯示位置，就是如圖所示的情況

很顯然，我要在選擇省市級後輸入準确位址，比如我選擇北京市東城區了，我要在東城區裡面找成都飯店。。。你一輸成都，這個智能提示會在全國範圍内搜尋，而且事件是自動注冊在

var ac = new BMap.Autocomplete( //建立一個自動完成的對象

                                        {

                                            "input": "addr2",

                                            "location": map

                                        });

這個位置的，就是通過input，百度的js對addr2這個input注冊監聽事件，是以根本是沒法改變條件的，唯一的辦法就是攔截

百度api這個地方做得還比較明智，就是無論你是通過鍵盤輸入還是js輸入，都是觸發智能提示的事件，那我就通過一個input（addr），把addr2中的val改為 省市區+addr，監聽addr的onkeyup事件，onkeydown和百度地圖的監聽有沖突，把addr2 的位置用addr給覆寫掉，不能display:none，必須占位，不然百度的提示框位置會有問題。并且在選擇智能提示後，詳細位址不顯示省市區的文字，如下的js裡也有控制，具體如下：

<input type="inputText" tabindex="7" id="addr2" name="addr2" placeholder="請輸入具體的位址" style="width: 277px;visibility: hidden"/>
 <input type="inputText" tabindex="7" id="addr" name="addr" placeholder="請輸入具體的位址" style="width: 277px;z-index: 1;margin-left: -282px;" οnkeyup="mysearch(this)"/>           

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>
@*                                    <div id="r-result">請輸入<input type="text" id="suggestId" value="百度" style="width: 400px;"/>*@
@*                                    </div>*@
                                    <div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 400px; height: auto; display: none;"></div>
                                    <div id="l-map"></div>
                                    <script type="text/javascript">

                                        function mysearch(e) {
                                            if ($('#province3').val() == '') {
                                                layer.alert('請先選擇省市區');
                                                $('#addr').val('');
                                                $('#addr2').val('');
                                            }
                                            $('#addr2').val($('#province3').val() + $('#city3').val() + $('#area3').val() + $(e).val());
                                        }

                                        // 百度地圖API功能
                                        function G(id) {
                                            return document.getElementById(id);
                                        }

                                        var map = new BMap.Map("l-map");
                                        map.centerAndZoom("北京", 12); // 初始化地圖,設定城市和地圖級别。

                                        var ac = new BMap.Autocomplete( //建立一個自動完成的對象
                                        {
                                            "input": "addr2",
                                            "location": map
                                        });

                                        ac.addEventListener("onhighlight", function (e) { //滑鼠放在下拉清單上的事件
                                         
                                            var str = "";
                                            var _value = e.fromitem.value;
                                            var value = "";
                                            if (e.fromitem.index > -1) {
                                                value = _value.province + _value.city + _value.district + _value.street + _value.business;
                                            }
                                            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                                            value = "";
                                            if (e.toitem.index > -1) {
                                                _value = e.toitem.value;
                                                value = _value.province + _value.city + _value.district + _value.street + _value.business;
                                              
                                            }
                                            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                                            G("searchResultPanel").innerHTML = str;
                                        });

                                        var myValue;
                                        ac.addEventListener("onconfirm", function(e) { //滑鼠點選下拉清單後的事件
                                            var _value = e.item.value;
                                            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                                            G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                                            setPlace();

                                            $('#addr').val(_value.street + _value.business);
                                            
                                          
                                        });

                                        function setPlace() {
                                            map.clearOverlays(); //清除地圖上所有覆寫物
                                            function myFun() {
                                                
                                                var pp = local.getResults().getPoi(0).point; //擷取第一個智能搜尋的結果
                                                map.centerAndZoom(pp, 18);
                                                map.addOverlay(new BMap.Marker(pp)); //添加标注
                                              
                                            }

                                            var local = new BMap.LocalSearch(map, {
                                                //智能搜尋
                                                onSearchComplete: myFun
                                            });
                                            local.search(myValue);
                                        }
                                    </script>           

上張改後的圖：