uniapp-042-搜索页-搜索交互逻辑实现

实际业务的逻辑

第一，我们在输入框当中输入文字；

第二，我们点击enter

第三，我们看到了我们的搜索结果

第四，我们点击搜索结果

第五，我们添加到搜索历史当中

所以，我们需要先实现以下搜索结果；

1 - 编写搜索结果布局样式

2 - 编写搜索的云函数

'use strict';
const db = uniCloud.database()
const $ = db.command.aggregate
exports.main = async (event, context) => {
	// 接收分类，通过分类去筛选数据
	const {
		user_id,
		value,
	} = event
	
	const userinfo = await db.collection('user').doc(user_id).get()
	const article_likes_ids = userinfo.data[0].article_likes_ids
	
	const list = await db.collection('article')
		.aggregate()
		// 追加字段
		.addFields({
			is_like: $.in(['$_id', article_likes_ids])
		})
		.project({
			content: false
		})
		.match({
			/* 按照正则匹配 */
			title: new RegExp(value)
		})
		.end()

	return {
		code: 200,
		msg: '数据请求成功',
		data: list.data
	}
};

核心就是一个，就是按照正则匹配。

3 - 处理搜索逻辑

		methods: {
			/* 用户输入框输入的搜索数据 */
			change(value) {
				/* ① 当我们搜索的时候，我们需要发送网络请求获取文章数据get_list */
				/* value是我们输入框的输入，这个输入变化的change监控是很频繁的； */
				/* 每次change我们都请求一次数据，这样太不要脸了； */
				/* 这里需要做个请求延时的效果 */
				/* ② 用户退格删除输入框的文字的时候，判断value是不是空 */
				/* 哪怕value是空，也会发请求进行一次搜索的； */
				if(!value){
					clearTimeout(this.timer)
					this.mark = false
					this.getSearch(value)
					return
				}
				/* 这个mark是不在页面渲染的，所以就不要放在data里头了； */
				/* 一开始这个mark肯定是没有赋值的，就是undefine的，所以this.mark是false的； */
				/* 这个this.mark的含义是什么呢？要发请求，就是true；不发请求，就是false； */
				if (!this.mark) {
					this.mark = true
					this.timer = setTimeout(() => {
						this.mark = false
						this.getSearch(value)
					}, 500)
				}
				// this.$store.dispatch('set_history', {
				// 	name: 'test'
				// })
			},
			/* 发送网络请求 */
			getSearch(value) {
				if(!value){
					this.searchList = []
					this.is_history = true
					return
				}
				this.is_history = false
				this.$api.get_search({
					value,
				}).then(res => {
					const {
						data
					} = res
					this.searchList = data
				})
			}
		}

要注意解决两个问题。

第一个问题，用户输入框当中输入文字的change事件监控，监控到事件就发送请求，不能发送太频繁。

所以，这里涉及到一个延时请求的逻辑。

第二个问题，这里涉及到用户清空输入框的文字，那么搜索结果就不要显示了。

所以，这里涉及一个清空显示的逻辑。

4 - 效果