Teach you step by step how to implement content search function in mini program

This article will share with you a practical experience in developing a small program and introduce how to implement the content search function in a small program. I hope it will be helpful to everyone!

Previously we implemented the display of the homepage content list, but did not implement the real function of the search box at the top. In this article, we will add a real search to the search box. Function. [Related learning recommendations: 小program development tutorial]

Search content binding

Let’s take a look at what it looks like after we click on the search box now

Here, we use vant's search component, and its documentation introduces a series of event binding methods for this component.

What we want to use is to trigger the real content search when the search is determined, so we add the binding of this event to the search component As follows

Next, we print the value variable bound to the search component in the response implementation of the search event, and then perform input testing.

handleSearch() {
    const { searchValue } = this.data
    console.log('搜索内容', searchValue)
}

It should be noted here that in the developer tools, for components such as input boxes, since they are on the computer side, they cannot evoke an input method interface similar to the mobile phone side, so the interaction with the small program on the mobile phone is All real differences.

In this case, we can use the preview function to debug on the mobile phone. After opening the mini program on the mobile phone, you can click ... in the upper right corner to bring up the debugging panel to view the console. Output.

Or use the real machine debugging function provided by the developer tools. You can preview the mini program on your mobile phone and see the debugging information in real time in the developer tools on the computer.

Debugging

After debugging, we found that the value bound to search will only be entered for the first time It is later changed and stored in searchValue, and the value entered subsequently will not update this variable. This results in us not being able to use the latest entered content for every search, which is a problem.

Data Binding

The solution is also very simple, which is to use the data binding feature that comes with the mini program and add the search component to the The incoming value attribute is changed to model:value, thereby enabling two-way data binding.

In this way, after subsequent input updates, the value of searchValue will be updated at the same time to achieve the effect of synchronous modification.

Conditional query

Then we can get the content entered in the search box each time, and we can use this as a keyword to query the list content.

The rule is to find the records containing our search keywords in text from all the records in the database. Of course, only 20 records will be returned at a time, and pull-up can also be supported. load.

In fact, the method here is basically the same as the previous method of querying data, except that a keyword matching condition is added on the original basis, so let us transform the previous data query method.

We added the search content as a parameter to the method originally used to refresh the entire list content, and passed it transparently to the cloud function processing method used to actually query the data. At the same time, every time the search box confirms the search, it is judged whether there is search content, and if so, the data is reacquired.

Database record matching

Next, we also need to make corresponding changes to the database data extraction in the cloud function. The database record will be used here. Regular matching method is used to match the search content. For details, please refer to the official document

The core logic after the transformation is as follows

const db = cloud.database()
const collection = db.collection('homeContentList')

let searchPromise
let countPromise

try {
  if (content) {
    const searchReg = db.RegExp({
      regexp: content,
      options: 'i'
    })
    searchPromise = collection.where({
      text: searchReg
    })
    .skip(pageNo).limit(pageSize).get()
    countPromise = collection.where({
      text: searchReg
    })
    .count()
  } else {
    searchPromise = collection.skip(pageNo).limit(pageSize).get()
    countPromise = collection.count()
  }
  const [{ data: listData }, { total }] = await Promise.all([searchPromise, countPromise])
  if (listData) {
    data = listData
  }
  totalSize = total
} catch (error) {
  console.log('error', error)
}

We determine whether there is search content , to distinguish whether to perform regular matching in the process of querying data, and ignore the letter case of the search content when there is search content, so as to match as much content as possible.

Search results

In this way, we realize the query for the search content.

内容页面优化

最后，我们优化一下首页的展示效果。

无数据组件

很多页面都有可能是数据列表的形式，而其各自在加载完所有数据后需要展示在底部的“没有更多内容”字样可能不同，所以我们将这部分展示封装成一个可供复用的自定义组件。

试图部分

<view class="wrap">
  <text class="text">{{text}}</text>
</view>

组件样式

.wrap {
  width: 100%;
  padding: 20rpx 0 40rpx;
  text-align: center;
}
.text {
  color: #999;
  font-size: 26rpx;
  line-height: 30rpx;
}

组件参数

Component({
  properties: {
    text: {
      type: String,
      value: '没有更多内容了'
    }
  }
})

展示效果

总结

这篇，我们实现了搜索框功能，将搜索框中输入的内容作为搜索关键字，从而在数据库中查找包含关键字的记录进行展示。另外，我们还将“没有更多内容”封装可供复用的组件。

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of Teach you step by step how to implement content search function in mini program. For more information, please follow other related articles on the PHP Chinese website!