uniapp实现搜索页面以及搜索功能思路分享

一、共享示例

        昨日在做搜索页面及其功能时作如下总结：

1、布局不用多说，这里的重头戏放在实现功能逻辑上

2、我的想法是做两个布局，1个搜索历史热门搜索界面，1个搜索结果界面。如下图

二、思路梳理

①文本框输入内容，发起请求获取数据。

1、文本框做好布局我们搜索框进行双向绑定(v-model)并且定义个空字符串(keyword，用于双向绑定输入内容)，让搜索按钮获取输入内容并发起网络请求。贴代码：

<view v-cloak id="app" class="search-head">
	<uni-icons class="searchicon" type="search" size="30"></uni-icons>
	<input class="inputkeyword" type="text" placeholder="输入搜索课程" v-model="keyword" />
	<button class="searchbutton" type="default" size="mini" @click="getsearch(keyword)">
		<text>搜索</text>
	</button>
</view>

data() {
	return {
		keyword: '', //获取输入框输入的文本
	};
},

2、当button获取到输入内容时(keyword)，发起对应的网络请求(这里是我封装的请求，并将请求结果赋给data中定义的空数组)

data() {
	return {
		specialList: [], //关键字搜索回来的数据
	};
},
methods: {
	async getsearch(keyword)
		const res = await request('index/go_search?search=' + keyword + '&limit=10')
		// console.log(res)
		this.specialList = res.data
		console.log(this.specialList)
		// 搜索按钮事件
		console.log("input框输入：" + keyword)
		
	},
			
}

3、到这里，请求回来的搜索内容就可以告一段落了。布局渲染自己搞(#^.^#)

②记录搜索记录并缓存到本地

1、做这个只需要将input的事件中加一个动作。就是将关键字(keyword)存入自定义的数组中，并缓存到本地。贴代码：

data() {
	return {
		historyList: [], //搜索记录
	};
},
//以下是button按键方法的内容
if (keyword == '') {
	uni.showModal({
		title: '搜索内容不能为空'
	});
} else {
//判断数组里面是否有重复的搜索内容，有的话就删除之前的，把现在搜索的放在数组的前面
	if (this.historyList.includes(keyword)) {
		let i = this.historyList.indexOf(keyword);
		this.historyList.splice(i, 1);
		//把现在搜索的放在数组的前面
		this.historyList.unshift(keyword)
	} else {
		this.historyList.unshift(keyword)
		uni.setStorageSync('searchList', JSON.stringify(this.historyList))
	}
}

2、就这样也只是将搜索记录存进本地，我们再进入这个页面要读取本地缓存记录即可

//每次进入页面的时候拿到存进去的缓存
onShow() {
	this.historyList = JSON.parse(uni.getStorageSync('searchList') || '[]')
	// 目前有什么历史记录
	// console.log('onshow', this.historyList)
},

3、这样的话我们就完成了点击搜索按钮，将搜索记录记起来，并且将搜索记录缓存到本地。布局自己做啦(#^.^#)

4、删除搜索记录代码也贴上

deleteHistory() {
	// 清楚搜索历史
	uni.showToast({
		title: '已清空'
	});
	uni.removeStorage({
		key: 'searchList'
	});
	this.historyList = [];
},

③切换布局

1、至于我怎么切换布局的，我只是在data中定义一个值，然后监听input框是否有文本。有文本切换值，没有文本再切换值就行。贴代码

data() {
	return {
		show: 'true', //切换布局
	};
},
watch: {
	// 监听input框是否有文本，没有文本和有文本更换show状态，更换布局
	keyword(newValue, oldValue) {
		if (newValue == '') {
			this.show = true
		}else{
            this.show = false
            }
	}
},

④另外，我再分享一下我的布局框架。(仅供大家参考)

顶部搜索框

下边搜索记录(监听input框是否有文本，有文本show==true。显示此布局)

下边搜索结果(监听input框是否有文本，有文本show==false。显示此布局)

三、总结

        我们做搜索页功能要了解如下几种知识点。

1、input框双向绑定

2、数据请求、json解析渲染

3、事件监听

4、数据缓存

好啦，如上就是我此次做搜索页面的小总结，希望我的思路能给大家个思绪启发，感谢各位阅读。