先上代码

<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap {
	height:400px;
	width:50%;
}
#search_place{
	width:300px;
}
</style>

<input type="text" class="input-text" id="search_place" placeholder="请输入地址">
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:200px;height:auto; display:none;z-index: 99999;"></div>
<div id="allmap"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度ak"></script>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
initBdMap('重庆市','search_place');
var map;
var myValue;
function initBdMap(citystr,addressId){
	//初始化bdmap
	map = new BMap.Map("allmap");
	map.centerAndZoom(citystr,14);
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
	map.enableScrollWheelZoom(true);//启鼠标滚轮缩放
	map.enableContinuousZoom();
	//点击获取经纬度和地址
	map.addEventListener("click", function(e){
		var pt = e.point;
		var geoc = new BMap.Geocoder();
		console.log(pt);
		map.clearOverlays();
		var tmpPoint = new BMap.Point(pt.lng, pt.lat);
		var marker = new BMap.Marker(tmpPoint); //按照地图点坐标生成标记
		map.addOverlay(marker);
		geoc.getLocation(pt, function(rs){
			//addressComponents对象可以获取到详细的地址信息
			var addComp = rs.addressComponents;
			var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
			console.log(site);
			$('#'+addressId).val(site);
		});
	});
	//输入地址提示
	var ac = new BMap.Autocomplete({"input": addressId , "location": map});
	ac.addEventListener("onhighlight", function (e) {
		var str = "";
		var _value = e.fromitem.value;
		var value = "";
		console.log(_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;
		$('#searchResultPanel').html(str);
	});
	
	ac.addEventListener("onconfirm", function (e) {
		var _value = e.item.value;
		myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
		console.log(myValue);
		$('#searchResultPanel').html("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
		setPlace();
	});
}
//移动到选择的地点上
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>

更换百度ak，即可使用

查看ak

注意事项

这段代码不要修改，是自动完成框的弹层，当然样式是可以改的

<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:200px;height:auto; display:none;z-index: 99999;"></div>

关于自动完成弹出层不显示的问题（主要是在弹出框中不显示），请检查z-index

initBdMap方法第一个参数是初始化地图的显示城市，当然区县也是可以的。

第二个参数是搜索框的id，自动完成的弹层会自动显示在搜索框的下面

效果图