uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo
2023-06-01 00:00:00
uni
首页列表页搜索功能开发
首页列表视图：/pages/index/index.
<template>
<view>
<view>
<view>
<navigator hover-class="none" url="../search/search">
<text class="lg cuIcon-search i_search_gray"></text>
<text>{{col.search_tit}}</text>
<view hover-class='hover_act' class="lg text-gray cuIcon-close" @click.stop="searchClose"></view>
</navigator>
</view>
</view>
</view>
</template>js代码：
<script>
from '@/utils/utils.js'
export default {
data() {
return {
col: {
search_tit: '输入地址',
},
getPlistData: { //参数
bankid: '',
sheng: '',
shi: 373,
qu: '',
wdtype:1
}
};
},
components: {
},
onReachBottom() {
},
onLoad(e:any) {
let that = this;
if (e.id) {
that.getPlistData.search_word = e.id;
that.col.search_tit = e.id;
}
},
onHide() {
},
onShow() {
console.log("页面onShow")
},
methods: {
searchClose():void {
if (this.getPlistData.search_word) {
this.getPlistData.search_word = '';
this.col.search_tit = '输入';
}
},
},
created() {
},
computed: {
}
}
</script>css代码省略...
搜索页 （首页点击搜索框跳转进来）
/pages/search/search.vue
<template>
<view>
<view>
<view>
<!--input添加可以监听输入 @input="inputChange" -->
<input
type="text"
:adjust-position="true"
:placeholder="defaultKeyword"
v-model="keyword" @confirm="doSearch(false)"
placeholder-class="placeholder-class" confirm-type="search">
</view>
<view @tap="doSearch(false)">搜索</view>
</view>
<view >
<scroll-view v-show="isShowKeywordList" scroll-y>
<block v-for="(row,index) in keywordList" :key="index">
<view hover-class="keyword-entry-tap" >
<view @tap.stop="doSearch(keywordList[index].keyword)">
<rich-text :nodes="row.htmlStr"></rich-text>
</view>
<view @tap.stop="setKeyword(keywordList[index].keyword)">
<image src="/static/image/back.png"></image>
</view>
</view>
</block>
</scroll-view>
<scroll-view v-show="!isShowKeywordList" scroll-y>
<view v-if="oldKeywordList.length>0">
<view>
<view>历史搜索</view>
<view>
<image @tap="oldDelete" src="/static/image/delete.png"></image>
</view>
</view>
<view>
<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index">{{keyword}}</view>
</view>
</view>
<view>
<view>
<view>热门搜索</view>
<view>
<image @tap="hotToggle" :src="'/static/image/attention'+forbid+'.png'"></image>
</view>
</view>
<view v-if="forbid==''">
<view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{keyword}}</view>
</view>
<view v-else>
<view>当前搜热门搜索已隐藏</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
from '@/utils/localCache.js';
export default {
data() {
return {
defaultKeyword: "",
keyword: "",
oldKeywordList: [],
hotKeywordList: [],
keywordList: [],
forbid: '',
isShowKeywordList: false
}
},
onLoad() {
this.init();
},
onShow(){
},
methods: {
init() {
this.loadDefaultKeyword();
this.loadOldKeyword();
this.loadHotKeyword();
},
blur(){
uni.hideKeyboard()
},
//加载默认搜索关键字
loadDefaultKeyword() {
//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
this.defaultKeyword = "输入地址";
},
//加载历史搜索,自动读取本地Storage
loadOldKeyword() {
let that=this;
uni.getStorage({
key: 'OldKeys',
success: (res) => {
console.log(res,"dfsa")
if(!res.data){
res.data="[]"
}
var OldKeys = JSON.parse(res.data);
that.oldKeywordList = OldKeys;
}
});
},
//加载热门搜索
loadHotKeyword() {
//定义热门搜索关键字，可以自己实现ajax请求数据再赋值
this.hotKeywordList = ['热门搜索1','热门搜索2','热门搜索3'];
},
//高亮关键字
drawCorrelativeKeyword(keywords, keyword) {
var len = keywords.length,
keywordArr = [];
for (var i = 0; i < len; i++) {
var row = keywords[i];
//定义高亮#9f9f9f
var html = row[0].replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
html = '<div>' + html + '</div>';
var tmpObj = {
keyword: row[0],
htmlStr: html
};
keywordArr.push(tmpObj)
}
return keywordArr;
},
//顶置关键字
setKeyword(index) {
this.keyword = this.keywordList[index].keyword;
},
//清除历史搜索
oldDelete() {
uni.showModal({
content: '确定清除历史搜索记录？',
success: (res) => {
if (res.confirm) {
console.log('用户点击确定');
this.oldKeywordList = [];
uni.removeStorage({
key: 'OldKeys'
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//热门搜索开关
hotToggle() {
this.forbid = this.forbid ? '' : '_forbid';
},
//执行搜索
doSearch(keyword) {
keyword = keyword===false?this.keyword:keyword;
this.keyword = keyword;
this.saveKeyword(keyword); //保存为历史
console.log(keyword,"搜索")
uni.reLaunch({
url: '/pages/index/index?id='+keyword
})
uni.showToast({
title: keyword,
icon: 'none',
duration: 2000
});
},
//保存关键字到历史记录
saveKeyword(keyword) {
uni.getStorage({
key: 'OldKeys',
success: (res) => {
if(!res.data){
res.data="[]"
}
var OldKeys = JSON.parse(res.data);
var findIndex = OldKeys.indexOf(keyword);
if (findIndex == -1) {
OldKeys.unshift(keyword);
} else {
OldKeys.splice(findIndex, 1);
OldKeys.unshift(keyword);
}
//最多10个纪录
OldKeys.length > 10 && OldKeys.pop();
uni.setStorage({
key: 'OldKeys',
data: JSON.stringify(OldKeys)
});
this.oldKeywordList = OldKeys; //更新历史搜索
},
fail: (e) => {
var OldKeys = [keyword];
uni.setStorage({
key: 'OldKeys',
data: JSON.stringify(OldKeys)
});
this.oldKeywordList = OldKeys; //更新历史搜索
}
});
}
}
}
</script>
效果图:
首页：
搜索页：
百度开发者工具里面Console面板 参数
页面隐藏onHide
{data: "["西城支行","广州"]"} "dfsa"
西城支行 搜索
页面onShow
开发者工具暂不支持返回wgs84坐标，默认返回gcj02坐标系, 请在百度APP中调试此功能
{search_word: "西城支行", …}
search_word:"西城支行"
__proto__:Object
相关文章