根据关键字搜索相关地理位置的需求,已经开发完成,做个笔记吧,上效果图
这里的搜索数据是根据接口返回拿到的,我会把数据格式发出来放到最后。
附上代码
wxml:
<view class="search-box">
<view class="input-box">
<image mode="widthFix" src="../../assets/close.png" class="clearInput" bindtap="clearInput"/>
<view class="searchImg" bindtap="keywordsSearch">
<image mode="widthFix" src="{{keyword.length > 0? '../../assets/searchSelect.png': '../../assets/search.png'}}" />
</view>
<input class="searchInput" value="{{keyword}}" type="text" placeholder="请输入关键字搜索" maxlength="20" bindinput="searchLocation" />
</view>
<view class="tips" wx:if="{{searchList.length != 0}}">当前城市的搜索结果</view>
<view class="tips" wx:if="{{searchList.length == 0 && showSorry}}">抱歉,没有搜索到相关内容</view>
</view>
<view class="resultList searchList" wx:if="{{searchList.length != 0}}">
<scroll-view style="height: 82vh" class="" scroll-x="false" scroll-y="true">
<view class="list">
<block wx:for="{{searchList}}" wx:key="index" >
<view class="li" bindtap="getLocation" data-name="{{item.addressShortName}}">
<view class="venueName">
<block wx:for="{{item.addressShortName}}" wx:for-item="names" wx:for-index="idx" wx:key="idx">
<text class="{{names == keyword ? 'hightLight' : ''}}">{{names}}</text>
</block>
</view>
<view class="address">
<block wx:for="{{item.address}}" wx:for-item="addr" wx:for-index="idx" wx:key="idx">
<text class="{{addr == keyword ? 'hightLight' : ''}}">{{addr}}</text>
</block>
</view>
<text class="type">{{item.type}}</text>
<image class="searchSelect" src="../../assets/searchSelect.png"></image>
</view>
</block>
</view>
</scroll-view>
</view>
wxss:
.search-box {
width: 100%;
height: auto;
/* background: #f1f1f1; */
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.input-box {
width: 700rpx;
height: 72rpx;
background: #f1f1f1;
border-radius: 12rpx;
margin: 18rpx 25rpx;
position: relative;
}
.input-box input {
border: 0;
height: 72rpx;
width: 100%;
font-size: 28rpx;
padding-left: 40rpx;
box-sizing: border-box;
}
.clearInput {
width: 32rpx;
height: 32rpx;
position: absolute;
padding: 20rpx;
top: 0;
right: 100rpx;
z-index: 99;
}
.searchImg {
width: 80rpx;
height: 100%;
background-color: #ddd;
position: absolute;
top: 0;
right: 0;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
z-index: 99;
}
.searchImg image {
width: 32rpx;
height: 32rpx;
margin: 20rpx 25rpx;
}
.resultList {
width: 100%;
height: auto;
padding-top: 29rpx;
display: flex;
flex-direction: row;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
}
.resultList .list .li {
padding-top: 20rpx;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #eee;
position: relative;
}
.resultList .list .li:first-child {
padding-top: 0;
}
.resultList .list .li:last-child {
border-bottom: 0;
}
.resultList .list .li .venueName {
/* display: flex;
align-items: center; */
color: #333;
font-size: 30rpx;
width: 550rpx;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-left: 46rpx;
}
.resultList .list .li .address {
font-family: PingFangSC-Regular;
font-size: 26rpx;
color: #877E78;
width: 550rpx;
/*超过两行隐藏并省略*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-left: 46rpx;
}
.searchList {
justify-content: center;
}
.searchList .list {
width: 666rpx;
margin: 0 auto;
margin-top: 0;
}
.li .hightLight {
color: #159fed;
}
.tips {
color: #877E78;
font-size: 26rpx;
margin-left: 25rpx;
line-height: 80rpx;
}
.type {
position: absolute;
bottom: 38rpx;
right: 25rpx;
font-size: 26rpx;
color: #877E78;
}
.searchSelect {
width: 34rpx;
height: 34rpx;
position: absolute;
bottom: 46rpx;
left: 0;
}
js:
const app = getApp().globalData;
const api = require('../../config/api.js');
const request = require('../../config/request.js').request;
const regeneratorRuntime = require('../../utils/runtime');
Page({
/**
* 页面的初始数据
*/
data: {
searchList: [], // 搜索结果
keyword: '', // 关键字
showSorry: false,
},
//将rpx转为px
// rpxFn(num){
// return num / 750 * this.data.windowWidth;
// },
// 搜索按钮进行关键字搜索
keywordsSearch() {
let keyword = this.data.keyword;
if( keyword == '' ) { return; }
wx.setStorageSync("searchName", keyword)
wx.navigateBack()
},
// 清除input中的内容
clearInput() {
this.setData({ keyword: '', showSorry: false, searchList: [] })
},
// 点击搜索的任意一条
getLocation(e) {
let searchName = e.currentTarget.dataset.name;
// console.log(searchName)
wx.setStorageSync("searchName", searchName.join('')) // 选项中会有空格
wx.navigateBack()
},
// input输入框发生改变
searchLocation(e){
let that = this;
let keyword = e.detail.value.trim();
this.setData({ keyword, searchList: [] }) // 搜索前先将地址容器置空
let params= {
cityId: wx.getStorageSync('selectCity').id.toString(),
keyword
}
request(api.poiSearch,'POST',params).then(res => { // !!!这里通过接口获取数据,数据格式在最后面会发出来
console.log(res.data)
if(res.data.length == 0) { that.setData({ showSorry: true }); return; }
let getInf = (str, key) => str.toString().replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%'); // 正则匹配关键词并切割成数组
let searchList = res.data.map(item => {
item.type == 1? item.type= '酒店': item.type= '地标'
// 关键字高亮
item.address != null? item.address = getInf(item.address, keyword): '';
item.addressShortName != null? item.addressShortName = getInf(item.addressShortName, keyword): '';
return item;
})
this.setData({searchList, showSorry: true});
})
},
})
选择的数据存在storage中,附上接口返回数据的格式
希望能帮助正在成长的你!