效果图
高德地址:https://lbs.amap.com/api/wx/guide/get-data/get-inputtips
js文件
var amapFile = require('../../lib/amap-wx.js'); //引入高德js
var config = require('../../lib/config.js'); //引用我们的配置文件
Page({
data: {
tips: {}
},
onLoad: function(){
},
bindInput: function(e){
var that = this;
var keywords = e.detail.value;
var key = config.Config.key;
var myAmapFun = new amapFile.AMapWX({key: '填写在高德开发平台获得的key'});
myAmapFun.getInputtips({
keywords: keywords,
location: '',
success: function(data){
if(data && data.tips){
that.setData({
tips: data.tips
});
}
}
})
},
bindSearch: function(e){
var keywords = e.target.dataset.keywords;
var url = '../poi/poi?keywords=' + keywords;
console.log(url)
wx.redirectTo({
url: url
})
console.log(e);
}
})
wxml文件
<view class="section">
<input bindinput="bindInput" placeholder="搜索" focus="true" />
</view>
<view bindtouchstart="bindSearch" data-keywords="{{i.name}}" class="text_box" wx:for="{{tips}}" wx:for-item="i">
{{i.name}}
</view>
wxss文件
.section{
height: 30px;
width: 100%;
}
.section input{
width:90%;
margin:5px auto;
border:1px solid #c3c3c3;
height:30px;
border-radius: 3px;
padding: 0 5px;
}
.text_box{
margin: 10px 25px;
border-bottom:1px solid #c3c3c3;
padding-bottom:10px
}