百度地图在用户输入的省市区范围内进行关键字智能提示搜索

来源：互联网发布：linux工具链编辑：程序博客网时间：2024/06/06 01:18

现在进行表单输入地址的时候分为省市区和详细地址，省市区用citypicker插件可以轻松完成，但是输入详细地址的时候要调用百度API进行关键字智能提示，那么问题来了，如何在用户输入的省市区内进行关键字搜索呢？不知道各位有没有这种疑惑？

其实解决方法也很简单，将百度地图给的搜索框隐藏掉，自己添加一个输入框，然后在添加的输入框上添加键盘弹起事件，通过事件给隐藏的搜索框赋值（含有省市区），问题解决。

废话不多说，上代码：

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />        <!--引入citypicker相关配置-->        <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>        <script src="../js/city/city-picker.data.js" type="text/javascript" charset="utf-8"></script>        <script src="../js/city/city-picker.js" type="text/javascript" charset="utf-8"></script>        <link rel="stylesheet" type="text/css" href="../js/city/css/city-picker.css" />        <style type="text/css">            body,            html {                width: 100%;                height: 100%;                margin: 0;                font-family: "微软雅黑";                font-size: 14px;            }            #r-result {                width: 100%;            }        </style>        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=***您的AK***"></script>        <title>关键字输入提示词条</title>    </head>    <body>        <div style="position: relative;">            <input id="pct" readonly type="text" style="width:300px;">        </div>        <!--citypicker产生的省市区无法直接获取省、市、区，故编写一个隐藏省、市、区输入框-->        <!--隐藏的省市区，方便下面调用-->        <div style="position: relative;">            <input id="province" name="province" type="hidden" />            <input id="city" name="city" type="hidden" />            <input id="district" name="district" type="hidden" />        </div>        <!--此输入框替代智能搜索输入框，将搜索关键字输入到此输入框中，然后调用此输入框的键盘弹起事件，对默认的关键字搜索框进行赋值，赋的值为输入的省市区+搜索的关键字-->        <div id="r-result">            <input type="text" id="suggestId2" value="" style="width:300px;" onfocus="setValue(this)" onkeyup="mysearch(this)"/>        </div>        <!--智能搜索提示框默认显示在输入搜索关键字的下面-->        <!--将关键字搜索输入框隐藏，但是要进行占位。不然智能搜索提示框出现的位置会有异常。进行占位之后搜索提示框就会出现在该输入框的下面。-->        <!--visibility:hidden：将输入框隐藏但占位-->        <div id="r-result"><input type="text" id="suggestId" value="" style="width:300px;height:0px;visibility:hidden"/></div>        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>    </body></html><script type="text/javascript">    /*citypicker*/    $("#pct").citypicker();    /*替代的关键字搜索框的聚焦事件，将citypicker中的省市区信息注入隐藏的省市区输入框中*/    function setValue() {        var pct = $("#pct").val();        var pcts = new Array();        pcts = pct.split("/")        $("#province").val(pcts[0]);        $("#city").val(pcts[1]);        $("#district").val(pcts[2]);    };    /*替代的关键字搜索框的键盘弹起事件*/    function mysearch(e) {        if($('#province').val() == '') {            alert('请先选择省市区');            $('#suggestId').val('');            $('#suggestId2').val('');        }        /*对默认的关键字搜索框进行赋值*/        $('#suggestId').val($('#province').val() + $('#city').val() + $('#district').val() + $(e).val());    }    // 百度地图API功能    function G(id) {        return document.getElementById(id);    }    var ac = new BMap.Autocomplete( //建立一个自动完成的对象        {            "input": "suggestId"        });    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();        /*替代的关键字搜索框显示的内容不需要省市区信息*/        $('#suggestId2').val(_value.street + _value.business);    });    function setPlace() {        var local = new BMap.LocalSearch({ //智能搜索            onSearchComplete: function(){                local.getResults().getPoi(0).point;            }        });        local.search(myValue);    }</script>

效果如下：
效果图

当然在提交表单的时候要在提交按钮上加点击事件：

function ck(){        /*在提交之前再次对默认搜索框进行赋值*/        /*防止输入时，点击的是浏览器记住的地址，从而没有触发键盘弹起事件，传出的地址值会为空*/        $('#suggestId').val($('#province').val() + $('#city').val() + $('#district').val() + $("#suggestId2").val());        $('#xxForm').submit();    }

阅读全文

0 0

百度地图 在用户输入的省市区范围内进行关键字智能提示搜索

百度地图在用户输入的省市区范围内进行关键字智能提示搜索