这里使用到了angucomplete-alt和高德地图。我对angucomplete-alt进行了调整,因为他的local调用,我的感觉是意义不大,谁会在实际开发,准备一堆数据,供你使用呢?你又不是做demo。
高德地图的作用是因为,我们在做商城、O2O应用时,不可避免的需要填写服务地址,
而服务地址也会涉及到定位问题,我们需要借助外界资源,比如高德地图、百度地图。
这两类都可以实现,之所以选择高德地图,是因为高德地图的城市编码,跟国家行政区域编码一致。
angucomplete-alt的说明文档在angucomplete-alt demo
1 html调用
<div angucomplete-alt id="shortAddress" data-tap-disabled="true"
placeholder="请输入小区名"
pause="300"
selected-object="selectedAddress"
local-data="localAddress"
local-search="findAddresses"
title-field="name"
field-required="true"
input-name="shortAddress"
minlength="1"
input-class="form-control form-control-small"
match-class="highlight">
</div>
2 controller调用
高德地图的地址信息在$item.originalObject中,您可以debug看看。
GaodeService
// 高德查询地址
$scope.findAddresses = function (cond) {
return GaoDeService.placeSearch(cond);
}
// 下拉选择地址
$scope.selectedAddress = function($item){
$scope.curAddress = $item.originalObject;
$scope.selectDivision = $scope.curAddress.adname;
}
$scope.localAddress = [];
3 angucomplete-alt指令修改
找到searchTimerComplete那段第557行增加then后面的部分,之前的本地数据,我改成了异步调用,这样可以方便扩展了,而angucomplete-alt的静态链接意义感觉不太大
// edit by dzm at 2016-7-10
scope.localSearch()(str, scope.localData).then(function(resp){
matches = resp;
scope.searching = false;
processResults(matches, str);
});
// end