前端原生小程序实现输入地址关键字的补完与提示

html部分:

放在"map"标签外边

<view class="search">
	   <view class="search-box">
	     <input class="search-input" model:value="{{inputValue}}"  bindinput="bindKeyInput"  placeholder="请输入地址"/>
	     <image mode="aspectFill" data-id="{{1}}" data-value="{{inputValue}}" bindtap="bindKeyInput" src="https://rrbstorage.oss-cn-hangzhou.aliyuncs.com/zhcc/1701410606757ss.png" style="width: 60rpx;height: 60rpx;"></image>
	   </view>
	   <view class="search-pull" wx:if="{{restaurants.length}}">
		   <view class="search-item" wx:for="{{restaurants}}" wx:for-item="item" wx:for-index="index" wx:key="index" data-item="{{item}}" bindtap="btnAddress">
			   <view class="title">{{item.title}}</view>
			   <view class="province">{{item.province}}-{{item.city}}-{{item.district}}</view>
		   </view>
	   </view>
  </view>

js部分:

    data:{
	  inputValue:"",
	  restaurants:[],
    },
	//输入框
    bindKeyInput: function (e) {
	  var _this = this;
	  _this.setData({
	      restaurants: []
	    })
	  let addressUrl = "https://apis.map.qq.com/ws/place/v1/suggestion";
	  let address= e.detail.value
	  if(e.currentTarget.dataset.id){
		 address= e.currentTarget.dataset.value
	  }
	  if(address){
		  wx.request({
		    url: addressUrl,
		    header: {
		      'content-type': 'application/json'
		    },
		  		 method: "get",
		  		 data:  {
		      key: "Z*************",
		      keyword:address
		    },
		    success (resp) {
		  	if (resp.data.status == 0 || resp.data.status == '0') {
		  		let pois = resp.data.data
		  		_this.setData({
		  		restaurants: pois
		  	})
		      }
		    }
		  })
	  }
    },
	// 选择下拉框地址
	btnAddress:function (e) {
		let point=e.currentTarget.dataset.item
		this.setData({
		  inputValue:point.title,
		  restaurants: [],
		  scale: 16,
		  latitude: point.location.lat,
		  longitude: point.location.lng
		})
	},

这里有用到腾讯地图的Web服务API:lbs.qq.com/service/web…

css部分:

.search{
   position: absolute;
   top: 20rpx;
   width: 100%;
   display: flex;
   flex-direction:column;
   align-items: center;
   justify-content: center;
}
.search-box{
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	width: 80%;
	background-color: #fff;
    display: flex;
	align-items: center;
	justify-content: space-between;
	border: 2rpx solid silver;
	border-radius: 60rpx;
}
.search-input{
   width: 79%;
   line-height: 80rpx;
   height: 80rpx;
}
.search-pull{
	width: 80%;
	background-color: #fff;
	border-radius: 20rpx;
	max-height: 500rpx;
	overflow-y: scroll
}
.search-item{
	width: 100%;
	height: 100rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}
.title{
	margin-top: 20rpx;
	font-size: 30rpx;
}
.province{
	color: #b6b6b6;
	font-size: 28rpx;
}