ionic 搜索提示

这里使用到了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 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

warrah

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值