现在进行表单输入地址的时候分为省市区和详细地址，省市区用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./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();}
