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

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

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

废话不多说,上代码:


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        
        <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>

        
        
        <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>
        
        
        
        <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
index = "
+ e.item.index + "
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>

效果如下:
百度地图 在用户输入的省市区范围内进行关键字智能提示搜索_第1张图片

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

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

你可能感兴趣的:(百度地图 在用户输入的省市区范围内进行关键字智能提示搜索)